注意点：

作为文件域(<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. [转]Getting a Packet Trace

    src:https://developer.apple.com/library/mac/qa/qa1176/_index.html Technical Q&A QA1176 Getting a ...

  2. 企业架构研究总结（44）——企业架构与建模之Archimate视图和视角

    3. ArchiMate的视角与视图 创建.维护一个企业架构是一件非常复杂繁琐的事情,因为这项工作需要面对许多背景.利益各异的干系人,对他们所关注的问题进行解答,并能够在他们之间形成无障碍的沟通流.为 ...

  3. jQuery跳房子插件hopscotch

    插件描述 跳房子是一个框架,使开发人员可以轻松预览产品并添加到他们的网页 跳房子接受JSON对象作为输入,并提供开发人员来控制渲染巡演显示和管理的游览进度的API. 使用步骤 要使用跳房子框架上手,只 ...

  4. EasyUI项目驱动学习

    下面以一个项目简单介绍easyui的使用,主要包括以下组件 布局面板 - layout 可伸缩面板 - accordion 选项卡 - tabs 控制面板 - panel 窗口 - window 对话 ...

  5. WampServer Mysql配置

    WAMP:Windows下的Apache+Mysql+Perl/PHP/Python,一组常用来搭建动态网站或者服务器的开源软件.可点击此处下载WampServer,然后,按照提示安装WAMP.需要说 ...

  6. 改善C#公共程序类库质量的10种方法和工具

    最近重构一套代码,运用以下几种方法,供参考. 1  公共方法尽可能的使用缓存 public static List<string> GetRegisteredCompany() { Str ...

  7. WPF4.5新特性(MSDN的翻译读不太懂)

    WPF4.5新特性(MSDN的翻译读不太懂) 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PU ...

  8. 黑马程序员：Java基础总结----GUI&网络&IO综合开发

    黑马程序员:Java基础总结 GUI&网络&IO综合开发   ASP.Net+Android+IO开发 . .Net培训 .期待与您交流! 网络架构 C/S:Client/Server ...

  9. <我的外骨骼，诺基>后的访谈

    <我的外骨骼,诺基>后的访谈 在接下采访任务之前,我对杨贵福的了解仅仅限于:有名的科幻作家,男性,成年.我虽然读过他的许多作品,但在这些作品中并不能找到作者的影子.我试着从作品的行文风格中 ...

  10. 关于EL表达式的生效时间(猜想)

    通过ajax与服务端异步交互的时候,在服务端将某些变量或对象设置到request等域里,此时页面上的EL表达式是获取不到ajax异步交互时设置在request等域里的变量或对像的. 我猜测可能EL表达 ...