<script>
            var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
                browse_button: 'btnBrowse',
                url: 'upload.ashx',
                flash_swf_url: 'Resource/scripts/js/Moxie.swf',
                silverlight_xap_url: 'Resource/scripts/js/Moxie.xap',
                filters: {
                    mime_types: [ //只允许上传图片文件
                      { title: "图片文件", extensions: "jpg,gif,png" }
                    ]
                }
            });
            uploader.init(); //初始化

            //绑定文件添加进队列事件
            uploader.bind('FilesAdded', function (uploader, files) {
                // alert(files[0].size);
                var msgFlg = 0;
                for (var i = 0, len = files.length; i < len; i++) {
                    if (files[i].size > 81920) {
                        uploader.files.splice(i, 1);
                        msgFlg = 1;
                    }
                    else {
                        !function (i) {
                            previewImage(files[i], function (imgsrc) {
                                $('#file-list').html($('#file-list').html() +
                                    '<div style="float:left" class="pic_list" id="' + files[i].id + '">'
                                    + ' (' + plupload.formatSize(files[i].size) +
                                    ')<a href="###" class="pic_delete" data-val=' + files[i].id +
                                    '>删除</a><br/>' +
                                '<img class="listview" width="90" height="60" src="' + imgsrc + '" name="' + files[i].name + '" /></div>');
                            })
                        }(i);
                    }
                }
                if (msgFlg == 1) {
                    alert("上传图片小于80K");
                }
            });

            $(document).on('click', '.pic_list a.pic_delete', function () {
                $(this).parent().remove();
                var toremove = '';
                var id = $(this).attr("data-val");
                for (var i in uploader.files) {
                    if (uploader.files[i].id === id) {
                        toremove = i;
                    }
                }
                uploader.files.splice(toremove, 1);
            });

            //所有都上传完成
            uploader.bind("UploadComplete", function (uploader, file) {
                alert("成功");
                $('#file-list').html("");
                exit();
            });
            function exit() {
                window.parent.location.href = window.parent.location.href;
            }
            //plupload中为我们提供了mOxie对象
            //有关mOxie的介绍和说明请看:https://github.com/moxiecode/moxie/wiki/API
            //如果你不想了解那么多的话,那就照抄本示例的代码来得到预览的图片吧
            function previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
                if (!file || !/image\//.test(file.type)) return; //确保文件是图片
                if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
                    var fr = new mOxie.FileReader();
                    fr.onload = function () {
                        callback(fr.result);
                        fr.destroy();
                        fr = null;
                    }
                    fr.readAsDataURL(file.getSource());
                } else {
                    var preloader = new mOxie.Image();
                    preloader.onload = function () {
                        //preloader.downsize(550, 400);//先压缩一下要预览的图片,宽300,高300
                        var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
                        callback && callback(imgsrc); //callback传入的参数为预览图片的url
                        preloader.destroy();
                        preloader = null;
                    };
                    preloader.load(file.getSource());
                }
            }

            $("#update").bind('click', function () {
                if (uploader.files.length < 1) {
                    alert('请选择图片!');
                    return false;
                }
                uploader.start();
            })
        </script>
 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
            UploadFile(context);
        }

        /// <summary>
        /// 上传图片
        /// </summary>
        /// <param name="context"></param>
        private void UploadFile(HttpContext context)
        {
            try
            {
                // 共通DB时间BLL
                BLL.GetTimeCommonBusiness comBll = new BLL.GetTimeCommonBusiness();

                context.Response.CacheControl = "no-cache";
                string s_rpath = "E:\\NewB2B\\04_源代码\\B2B.root\\B2B\\WEB\\upload\\resource";

                // 保存图片名做成
                ).Replace("-", "").Replace(":", "").Replace(" ", "").Replace("/", "").Replace(".", "");
                ,
                    context.Request[);
                // 图片上传
                )
                {
                    HttpPostedFile uploadFile = context.Request.Files[];
                    )
                    {
                        if (!Directory.Exists(s_rpath))
                        {
                            Directory.CreateDirectory(s_rpath);
                        }
                    }
                    uploadFile.SaveAs(string.Format("{0}\\{1}", s_rpath, name));
                }
                // 图片地址添加
                if (context.Session["SL0005EDIT$Photopath"] == null)
                {
                    ArrayList list = new ArrayList();
                    list.Add( name);
                    context.Session["SL0005EDIT$Photopath"] = list;
                }
                else
                {
                    ArrayList list = (ArrayList)context.Session["SL0005EDIT$Photopath"];
                    list.Add( name);
                    context.Session["SL0005EDIT$Photopath"] = list;
                }
            }
            catch (Exception)
            {
                throw;
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

plupload简易应用 多图片上传显示预览以及删除的更多相关文章

  1. 微信小程序实现图片上传,预览,删除

    wxml: <view class='imgBox'> <image class='imgList' wx:for="{{imgs}}" wx:for-item= ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  4. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  5. DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  6. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. JQuery插件:图片上传本地预览插件,改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  8. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

    可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...

  2. 淘宝ip库接口调用

    function ip($ip) {     $url="http://ip.taobao.com/service/getIpInfo.php?ip=".$ip;     $ipi ...

  3. 完成一段简单的Python程序,使用函数实现用来判断输入数是偶数还是奇数

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,使用函数实现用来判断偶数和奇数'''def number_deal(a): if a%2==0 ...

  4. linux下Nginx 安装配置

    Nginx 安装 一.首先要安装 PCRE PCRE 作用是让 Ngnix 支持 Rewrite 功能. 1.下载 PCRE 安装包,下载地址: http://downloads.sourceforg ...

  5. 10 个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  6. 【python】类中@property使用

    在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻辑.为了限制score的 ...

  7. 【uTenux实验】事件标志

    事件标志是一个用来实现同步的对象,由多个位组成,用作指示对应事件存在的标志.事件标志由用来指示对应事件存在的位模式(bitpattern)和一个等待事件标志的任务队列组成. uTenux提供了一组AP ...

  8. mysql 安装日志

    善于使用 mysqld.exe --console 来得到提示

  9. Atcoder CODE FESTIVAL 2016 qual C 的E题 Encyclopedia of Permutations

    题意: 对于一个长度为n的排列P,如果P在所有长度为n的排列中,按照字典序排列后,在第s位,则P的value为s 现在给出一个长度为n的排列P,P有一些位置确定了,另外一些位置为0,表示不确定. 现在 ...

  10. (LinkedList)Intersection of Two Linked Lists

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...