您的位置: 首页  >  IT文章  >  plupload 上传组件的使用

plupload 上传组件的使用

分类: IT文章 • 2024-01-06 21:32:00

在这之前在感谢园子好多大牛的文章，在这里就不列出来了。

进入正题。

svn检索https://github.com/moxiecode/plupload 获取到代码，这篇文章使用的是v2.1.8

主要功能：

1、多文件上传

2、分片上传

3、显示进度条

先看看项目结构

plupload 上传组件的使用plupload 上传组件的使用plupload 上传组件的使用

<style>
        .trip-uploader .webuploader-container { float: left; position: relative; width: 20%; display: block; line-height: 1.4; background: #fff; border: 1px dashed #D2D1D6; border-radius: 6px; color: #ccc; padding: 15px 0; font-size: 13px; text-align: center; margin: 4px; cursor: pointer; }
        .webuploader-pick { width: 100%; display: block; cursor: pointer; overflow: hidden; }
        .trip-uploader .webuploader-container .icon-plus { width: 32px; height: 32px; display: block; margin: 10px auto; background: url(/images/upimagedefault.png) no-repeat; background-size: 32px; }
        .upload-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 98%; overflow: hidden; z-index: 0; }
        .file-item { width: 120px; height: 120px; float: left; position: relative; margin: 0 0 10px; padding: 4px; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; }
        .fancybox { display: block; overflow: hidden; background: #eee; height: 120px; }
        .file-item img { height: 110px; }
        .file-item .progress { position: absolute; right: 4px; bottom: 4px; left: 4px; height: 4px; overflow: hidden; z-index: 15; margin: 0; padding: 0; border-radius: 0; background: 0 0; }
        .file-item .progress span { display: block; overflow: hidden; width: 0; height: 100%; background: url(/images/progress.png) repeat-x #06BD01; -webit-transition: width .2s linear; -moz-transition: width .2s linear; -o-transition: width .2s linear; -ms-transition: width .2s linear; transition: width .2s linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); }
    </style>

<form id="form1" runat="server">
        <div>
            <div class="trip-uploader" style="height: 160px;">
                <div class="uploader-images-list">
                </div>
                <div class="webuploader-container">
                    <div id="coverPicker" class="webuploader-pick webuploader-pick-hover" style="position: relative;">
                        <i class="icon icon-plus"></i>上传图片<br />
                        (最多N张)
                    </div>
                    <div id="imgupload" class="upload-btn"></div>
                </div>
            </div>
        </div> 
    </form>
 <script>
            var $list = $(".uploader-images-list");
            var uploader = new plupload.Uploader({ //实例化一个plupload上 传对象
                browse_button: 'imgupload',
                runtimes: 'html5,flash,silverlight,html4',
                url: '/Core/UploadHandler.ashx',
                flash_swf_url: '/js/plupload/Moxie.swf',
                silverlight_xap_url: '/js/plupload/Moxie.xap',
                filters: {
                    mime_types: [ //只允许上传图片文件
                      { title: "图片文件", extensions: "jpg,gif,png" }
                    ]
                }
                , prevent_duplicates: !1
                , max_file_size: '10mb'
                , chunk_size: '1mb'//分片上传一定要注意压缩的大小
                //, resize: {  320, height: 240, quality: 90 }
                , init:
                {
                    PostInit: function (a) {
                        console.log("初始化完毕");
                    },
                    FilesAdded: function (uder, files) {
                        console.log("添加进队列");
                        for (var i = 0; i < files.length; i++) {
                            var file = files[i];
                            appendimg(file.id);
                        }
                        uder.start();
                    },
                    BeforeUpload: function (uder, files) {
                        console.log("开始上传");
                    },
                    UploadProgress: function (uder, file) {
                        console.log("进度：[百分比:" + file.percent + "，状态：" + file.status + ",原始大小：" + file.origSize + ",已传：" + file.loaded + "]");
                        progress(file.id, file.percent);
                    },
                    UploadFile: function (uder) {
                        console.log(uder.id + "开始上传");
                    },
                    FileUploaded: function (uder, file, resObject) {
                        var result = resObject.response;
                        console.log("上传完成" + result);
                        var $fileitem = $("." + file.id)
                        $fileitem.find("img").attr("src", JSON.parse(result).data);
                        //移除进度条
                        $fileitem.find(".progress").remove();
                    },
                    ChunkUploaded: function (a, b, c) {
                        console.log("小片上传完成后");
                    },
                    UploadComplete: function (uder, files) {
                        alert("上传完毕");
                    },
                    Error: function () {
                        alert("ERROR");
                    }
                }

            });
            uploader.init(); //初始化

            function appendimg(id, imgurl) {
                var html = ' <div  class="' + id + ' file-item"><a class="fancybox"> <img /> </a> </div>';
                $(".uploader-images-list").append(html);
            }
            function progress(id, percent) {
                var c = $list.find("." + id);
                var d = c.find(".progress span");
                d.length || (d = $('<p class="progress"><span></span></p>').appendTo(c).find("span"));
                d.css("width",   percent + "%")
            }
            
        </script>

下面的是后台代码：

   /// <summary>
    /// BaseHandler 的摘要说明
    /// </summary>
    public class BaseHandler : IHttpHandler, IRequiresSessionState
    {
        public HttpRequest Request
        {
            get
            {
                return HttpContext.Current.Request;
            }
        }
        public HttpResponse Response
        {
            get
            {
                return HttpContext.Current.Response;
            }
        }
        public void ProcessRequest(HttpContext context)
        {
            var data = ProcessResponse(context);
            var newData = new { code = data.code, data = data.data, msg = data.msg };
            context.Response.ContentType = "application/json";
            string jsonData = JsonConvert.SerializeObject(newData);
            context.Response.Write(jsonData);
        }
        /// <summary>
        /// 定义输出函数
        /// </summary>
        /// <returns></returns>
        protected virtual ResponseData ProcessResponse(HttpContext context)
        {
            ResponseData data = new ResponseData { code = ReturnCode.error, data = "" };
            return data;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    /// <summary>
    ///  返回值
    /// </summary>
    public struct ResponseData
    {
        /// <summary>
        /// 返回的状态码
        /// </summary>
        public ReturnCode code;
        /// <summary>
        /// 返回状态码对应的消息
        /// </summary>
        public string msg;
        /// <summary>
        /// 附加内容
        /// </summary>
        public object data;
    }
    /// <summary>
    /// 操作代码 返回给前台JS
    /// </summary>
    public enum ReturnCode
    {
        /// <summary>
        /// 失败 0
        /// </summary>
        error = 0,
        /// <summary>
        /// 成功 1
        /// </summary>
        success = 1,
        /// <summary>
        /// 其他 ，自定义状态 返回9
        /// </summary>
        other = 9
    }
基类BaseHandler.ashx 
 public class UploadHandler : BaseHandler
    {
        ResponseData responseData = new ResponseData()
        {
            code = ReturnCode.error,
            msg = "未配置",
            data = null
        };
        protected override ResponseData ProcessResponse(HttpContext context)
        {
            Response.CacheControl = "no-cache";
            string dir = GetUploadPath();
            if (Request.Files.Count > 0)
            {
                try
                {
                    for (int j = 0; j < Request.Files.Count; j++)
                    {
                        int offset = Convert.ToInt32(Request["chunk"]); //当前分块
                        int total = Convert.ToInt32(Request["chunks"]);//总的分块数量
                        string name = Request["name"];
                        HttpPostedFile uploadFile = Request.Files[j];
                        if (total == 1)
                        {
                            if (uploadFile.ContentLength > 0)
                            {
                                string extname = Path.GetExtension(uploadFile.FileName);//.jpg
                                string filename = uploadFile.FileName; //xx.jpg
                                string path = dir + RndNum(6) + extname;
                                uploadFile.SaveAs(context.Server.MapPath(path));
                                responseData.msg = "上传成功";
                                responseData.data = path;
                            }
                        }
                        else
                        {
                            //文件 分成多块上传
                            string tempPath = WriteTempFile(uploadFile, offset);
                            if (total - offset == 1)
                            {
                                //如果是最后一个分块文件 ，则把文件从临时文件夹中移到上传文件夹中

                                string extname = Path.GetExtension(name);//.jpg
                                string newPath = dir + RndNum(6) + extname;
                                System.IO.FileInfo fi = new System.IO.FileInfo(context.Server.MapPath(tempPath));//临时文件名 
                                //把临时文件移动到新目录并重名
                                fi.MoveTo(context.Server.MapPath(newPath));
                                responseData.msg = "上传成功";
                                responseData.data = newPath;
                            }
                            else
                            {
                                responseData.msg = "上传成功";
                                responseData.data = tempPath;
                            }
                        }
                    }
                }
                catch (Exception ex)
                {
                    responseData.msg = ex.Message;
                    responseData.data = ex.ToString();
                }

            }
            return responseData;
        }

        /// <summary>
        /// 保存临时文件-返回相对路径
        /// </summary>
        /// <param name="uploadFile">文件流</param>
        /// <param name="chunk">第几个分块 从0开始</param>
        /// <param name="context"></param>
        /// <returns></returns>
        private string WriteTempFile(HttpPostedFile uploadFile, int chunk)
        {
            string tempPath = GetTempPath() + uploadFile.FileName + ".part"; //临时相对路径
            string saveTempPath = HttpContext.Current.Server.MapPath(tempPath);
            if (chunk == 0)
            {
                uploadFile.SaveAs(saveTempPath); //如果是第一个分块，则直接保存
            }
            else
            {
                //如果是其他分块文件 ，则原来的分块文件，读取流，然后文件最后写入相应的字节
                FileStream fs = new FileStream(saveTempPath, FileMode.Append);
                if (uploadFile.ContentLength > 0)
                {
                    int FileLen = uploadFile.ContentLength;
                    byte[] input = new byte[FileLen];
                    System.IO.Stream MyStream = uploadFile.InputStream;
                    MyStream.Read(input, 0, FileLen);
                    fs.Write(input, 0, FileLen);
                    fs.Close();
                }
            }

            return tempPath;
        }

        /// <summary>
        /// 该方法用于生成指定位数的随机数
        /// </summary>
        /// <param name="VcodeNum">参数是随机数的位数</param>
        /// <returns>返回一个随机数字符串</returns>
        public string RndNum(int VcodeNum)
        {
            string Vchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
            //string Vchar = "0,1,2,3,4,5,6,7,8,9";
            string[] VcArray = Vchar.Split(',');//拆分成数组

            string VNum = "";
            seed++;
            Random rand = new Random(seed);
            for (int i = 0; i < VcodeNum; i++)
            {
                VNum += VcArray[rand.Next(VcArray.Length - 1)];
            }
            return VNum;
        }
        private static int _seed = int.Parse(DateTime.Now.Ticks.ToString().Substring(10));
        private static int seed { get { return _seed; } set { _seed = value; } }

        //获取存放路径
        public static string GetUploadPath()
        {
            string path = HttpContext.Current.Server.MapPath("/upload/");
            if (!System.IO.Directory.Exists(path))
            {
                System.IO.Directory.CreateDirectory(path);
            }
            return "/upload/";
        }
        /// <summary>
        /// 获取临时目录 相对路径
        /// </summary>
        /// <returns></returns>
        public static string GetTempPath()
        {
            string path = GetUploadPath();
            path = HttpContext.Current.Server.MapPath("/upload/temp/");
            if (!System.IO.Directory.Exists(path))
            {
                System.IO.Directory.CreateDirectory(path);
            }
            return "/upload/temp/";
        }
    }
上传类UploadHandler.ashx

源代码：

demoPlupload

相关推荐