plupload简易应用 多图片上传显示预览以及删除

<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";



                // 保存图片名做成

                string flietime = comBll.GetTimeCommon(121).Replace("-", "").Replace(":", "").Replace(" ", "").Replace("/", "").Replace(".", "");

                string name = flietime + context.Request["name"].Substring(context.Request["name"].IndexOf(".") - 1,

                    context.Request["name"].Length - context.Request["name"].IndexOf(".") + 1);

                // 图片上传

                if (context.Request.Files.Count > 0)

                {

                    HttpPostedFile uploadFile = context.Request.Files[0];

                    if (uploadFile.ContentLength > 0)

                    {

                        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;

            }

        }