注意点：

作为文件域(<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. 揭开redis神秘面纱

    一直听别人说NoSQL,以前一直不明白,这到底是什么东西,今天听过我们涛哥的讲解,略有小感,特此小记. NoSQL(NoSQL = Not Only SQL),意为反SQL运动,是一项全新的数据库革命 ...

  2. HTML5小游戏UI美化版

    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...

  3. Socket通信之Java学习（一）

    最近从一篇博客中看到了Socket的介绍,是阿蜜果姐姐的博文:http://www.blogjava.net/amigoxie/archive/2007/02/11/99331.html,学习了下. ...

  4. 工具条OutLookBar

    工具条OutLookBar 灰姑娘本身也有自已的优点,但是却可能因为外貌不讨人喜欢,要变成白雪公主却需要有很多勇气和决心去改变自已: 有一颗善良的心 讨人喜爱的外貌 我这里讲的是一个工具条的蜕变过程, ...

  5. js 获取页面内链接

    今天有同学问如何用 JS 正则表达式获取一段文本中的超链接,并对超链接进行处理,想了几分钟,写了下面的代码: var re = /https?:\/\/[\w\.:~\-\d\/]+(?:\?[\w\ ...

  6. 把python文件编译成exe文件

    我用的是py2exe. 下载地址http://sourceforge.net/projects/py2exe/files/py2exe/0.6.9/ 你可以根绝自己的Python版本选择适当的下载 我 ...

  7. SmoOne——开源免费的企业移动OA应用，基于VS.Net

    一.SmoOne是什么一个开源的移动OA应用 二.语言.Net 三.开发环境Visual Studio 四.开发平台Smobiler Designer 五.功能该应用开源代码中包含注册.登录.用户信息 ...

  8. [ios2]ASIHTTPReques 清除所有持久连接

    http://www.winddisk.com/2012/08/27/iphone_screenlock_network_disconnection/ + (void)clearPersistentC ...

  9. Android基础知识-1

    1.Android的Activity任务栈 在Android的系统中,在APP运行时每个APP都会默认有一个任务栈,任务栈的名称以APP的包名命名.任务栈是一中先进后出的结构,APP中每一个调用的Ac ...

  10. 关于ABP聚合根类AggregateRoot的思考

    AggregateRoot和Entity的区别 AggregateRoot继承于Entity,并实现了IGeneratesDomainEvents接口 public class AggregateRo ...