注意点：

作为文件域(<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. web开发相关

    Session相关 关了浏览器session当然仍然存在,因为session是储存在服务器端的,而服务器是不可能知道你有没有关掉浏览器. 服务器只是简单的保持session接受用户请求,只有当sess ...

  2. Ruby的对象模型

    目录 备注对象模型无图无真相基本规则代码示例如何修改Singleton Class?如何修改类型,如Child?类型方法是特殊的实例方法,这些方法定义在类型的Singleton Class中.备注 备 ...

  3. ios开发屏幕问题

    1. 程序要要支持Iphone 和 ipad,所以首先必需创建一通用程序,这一操作只要在创建程序时在 devices那栏上勾选universal即可,完成后会发现有两个.xib文件,但只有一个view ...

  4. Nginx安装配置与HelloWorld

    <深入理解Nginx>阅读与实践(一):Nginx安装配置与HelloWorld 最近在读陶辉的<深入理解Nginx:模块开发与架构解析>,一是想跟着大牛练练阅读和编写开源代码 ...

  5. 代码契约CodeContract（八）

    代码契约(Code Contract):它并不是语言本身的新功能,而是一些额外的工具,帮助人们控制代码边界. 代码契约之于C#,就相当于诗词歌赋之于语言. --- C# in Depth 一,概述 1 ...

  6. 用T4消除代码重复，对了，也错了

    用T4消除代码重复,对了,也错了 背景 我需要为int.long.float等这些数值类型写一些扩展方法,但是我发现他们不是一个继承体系,我的第一个思维就是需要为每个类型重复写一遍扩展方法,这让我觉得 ...

  7. JAX-WS创建和处理SOAP消息

    JAX-WS规范是一组XML web services的JAVA API,在 JAX-WS中,一个远程调用可以转换为一个基于XML的协议例如SOAP,在使用JAX-WS过程中,开发者不需要编写任何生成 ...

  8. Python pandas 0.19.1 Intro to Data Structures 数据结构介绍 文档翻译

    官方文档链接http://pandas.pydata.org/pandas-docs/stable/dsintro.html 数据结构介绍 我们将以一个快速的.非全面的pandas的基础数据结构概述来 ...

  9. easyui 个人使用心得之下拉列表

    下拉框: 第一种:从数据库获取<input id="FlowType" name="FlowType" style="width: 245px; ...

  10. Mvc分页组件MvcSimplePager代码重构

    1 Mvc分页组件MvcSimplePager代码重构 1.1 Intro 1.2 MvcSimplePager 代码优化 1.3 MvcSimplePager 使用 1.4 End Mvc分页组件M ...