注意点：

作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" id="file1" name="file1" />

dataType参数一定要大写。如：dataType: 'HTML'

一.html

<body>

    <p><input type="file" id="file1" name="file" /></p>

    <input type="button" value="上传" />

    <p><img id="img1" alt="上传成功啦" src="" /></p>

</body>

二.js

  <script src="jquery-1.7.1.js" type="text/javascript"></script>

    <script src="ajaxfileupload.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $(":button").click(function () {

                ajaxFileUpload();

            })

        })

        function ajaxFileUpload() {

            $.ajaxFileUpload

            (

                {

                    url: '/upload.aspx', //用于文件上传的服务器端请求地址

                    secureuri: false, //是否需要安全协议，一般设置为false

                    fileElementId: 'file1', //文件上传域的ID

                    dataType: 'json', //返回值类型 一般设置为json

                    success: function (data, status)  //服务器成功响应处理函数

                    {

                        $("#img1").attr("src", data.imgurl);

                        if (typeof (data.error) != 'undefined') {

                            if (data.error != '') {

                                alert(data.error);

                            } else {

                                alert(data.msg);

                            }

                        }

                    },

                    error: function (data, status, e)//服务器响应失败处理函数

                    {

                        alert(e);

                    }

                }

            )

            return false;

        }

    </script>

三.后台

 protected void Page_Load(object sender, EventArgs e)

        {

            HttpFileCollection files = Request.Files;

            string msg = string.Empty;

            string error = string.Empty;

            string imgurl;

            if (files.Count > )

            {

                files[].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[].FileName));

                msg = " 成功! 文件大小为:" + files[].ContentLength;

                imgurl = "/" + files[].FileName;

                string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";

                Response.Write(res);

                Response.End();

            }

        }

四.JS前台页面判断文件内容大小

 function change() {

        $('.imgupload').off("change");   //先关闭一次change

        $('.imgupload').on("change", "#filePicture", function () {

            var bool = testMaxSize(this.files[]);   //调用方法

            if (bool) {

                $("#zt").text("移入可预览文件");

                var files = window.URL.createObjectURL(this.files[]);

                $('.laye_img').attr("src", files);

            } else {

                alert("图片大小超过限制，请上传小于1M体积！");

                $("#zt").text("选择上传图片");

                $('.laye_img').attr("src", "");

            }

            imgfloat()//调用

        })

    }
  //判断图片大小

    function testMaxSize(file) {

        if (file) {

            var fileData = file;

            var size = fileData.size;   //注意，这里读到的是字节数

            maxSize = ;   //转化为字节

            if (size <= maxSize) {

                return true;

            } else {

                return false;

            }

        }

    }

图片上传插件用法,JS语法【三】的更多相关文章

  1. 图片上传插件用法,net语法【二】

    之前一直写过KindeEditor中的小控件作为单独上次,但业务要求需要另一种方式 现在改用ajaxfileupload.js试试,这个一百度 一.首页引用 <script src=" ...

  2. KindeEditor图片上传插件用法

    因业务需要找了款插件 KindeEditor编辑器确认挺好用,但无奈技术有限,上传配置不知,故问度娘! 图片上传对于部分新手来说有时候是一件非常头疼的事,今天来分享一下项目中使用到的这个插件Kinde ...

  3. ueditor图片上传插件的使用

    在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...

  4. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  5. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  6. Aps.net中基于bootstrapt图片上传插件的应用

    Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...

  7. ssm项目中KindEditor的图片上传插件，浏览器兼容性问题

    解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...

  8. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  9. kindeditor 图片上传插件

    富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...

随机推荐

  1. Vnix项目正式启动

    历经3年的学习时间,我从Puppy Linux到各种常见的Linux发行版,从Gentoo Linux再到LFS,期间学会了LiveCD.中文化定制.服务器搭建.Google Key Search.C ...

  2. MSSQL数据库迁移到Oracle

    MSSQL数据库迁移到Oracle 最近要把一个MSSQL数据库迁移到Oracle上面,打算借助PowerDesigner这个软件来实现;今天简单研究一下这个软件的运用;把一步简单的操作步骤记录下来: ...

  3. 查看TOMCAT内存使用情况 以及修改方法

    查看TOMCAT内存使用情况 <% double total = (Runtime.getRuntime().totalMemory()) / (1024.0 * 1024); double m ...

  4. ubuntu 学习笔记1--安装jdk

    ubuntu 版本13.10 安装jdk参考网址http://stackoverflow.com/questions/14788345/how-to-install-jdk-on-ubuntulinu ...

  5. myeclipse 配置 resin-pro-4.0.34

    热部署: 在 resin.xml 文件下 增加 <host id="" root-directory="."> <!-- webapps ca ...

  6. JAVA多线程经典问题 -- 生产者 消费者 同步队列实现方法

    在JAVASE5 中的java.util.concurrent.BlockingQueue支持,BlockingQueue是一个接口但是我们通常可以使用LinkedBlockingQueue,它是一个 ...

  7. [置顶] 和孩子们一起学Python编程

    1. 推荐书名 Computer Programming for Kids and Other Beginners in Python, 4Ed.pdf     中文译名:<和孩子们一起学Pyt ...

  8. php设计模式----工厂模式

    工厂模式主要是为了代码执行的时候更灵活地new对象,就像工厂流水线一样,批量生产出产品. 目的:简化对象生成过程,更加灵活. 例子如下: <?php /** * User: freephp * ...

  9. 【转载】Servlet Filter（过滤器）、Filter是如何实现拦截的、Filter开发入门

    Servlet Filter(过滤器).Filter是如何实现拦截的.Filter开发入门 Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过F ...

  10. JavaScript星级评分

    事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...