注意点：

作为文件域(<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. 使ie6的漂浮栏滑动右侧滚动条的时候不抖动

    body {_background-attachment: fixed;}html {_background-image: url(about:blank);}

  2. tomcat创建一个windows服务

    具体步骤如下: 1.把JDK解压到C:\Program Files\Java下,Tomcat解压到D:\tomcat下 2.配置环境变量 JAVA_HOME:C:\Program Files\Java ...

  3. Redis系统学习 二、数据结构

    一.字符串     1.在Redis里,字符串是最基本的数据结构.当你在思索着关键字-值对时,你就是在死锁着字符串数据结构.不要被名字给搞混了. 常见实例: set users:leto " ...

  4. 安装linux版qq，安装二进制包编译器，安装mysql-5.6.11,删除已安装或安装失败的mysql-5.6.11,简单mysql练习题

    上午[root@localhost ~]# ./test3.sh dev1^C[root@localhost ~]# groupadd dev1[root@localhost ~]# vim /etc ...

  5. 自己动手写spring容器(3)

    好久没有写博客了,今天闲下来将之前未完成的表达出来. 在之前的文章自己动手写spring容器(2)中完成了对spring的依赖注入的实现,这篇将会介绍spring基于注解的依赖注入的实现. 在一般的J ...

  6. Oracle体系结构及备份（十七）——bg-others

    一 其他进程 Archiver (ARCn) Oneor more archiver processes copy the redo log files to archival storage whe ...

  7. 2013 Esri全球用户大会之元数据支持

    1.1 是否支持FGDC CSDGMArcGIS是否支持FGDC CSDGM和North American Profile (NAP)元数据标准?如何支持? 支持,从ArcGIS forDesktop ...

  8. 高反差保留滤镜学习OpenCV：滤镜系列（11）——高反差保留

    这几周笔者几篇文章介绍了改高反差保留滤镜的文章. 关联文章的地址 高反差保留就是高通滤波 r=(pix[x,y]-avg(R))/128 pix[x,y]*r+128*(1-r) #include & ...

  9. php+redis实现多台服务器内网存储session并读取

    大型网站由于大并发的问题会导致系统出现诡异的崩溃性问题这着实让人很是蛋疼,首先考虑的就是负载均衡服务器来处理这个,当然数据库的性能也是非常非常重要的,今天就说下在负载均衡情况下对于session这个问 ...

  10. Linux负载均衡软件LVS之四（测试篇-完）

    一.启动LVS集群服务LVS负载均衡管理和使用有两种方式,一种是以ipvsadm命令行脚步与ldirectord监控方式,一种是以Piranha工具进行管理和使用.下面分别介绍. 1.利用ipvsad ...