利用Plupload解决大容量文件上传问题 带进度条和背景遮罩层

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow

                       

大容量文件上传早已不是什么新鲜问题，在.net 2.0时代，Html5也还没有问世，要实现这样的功能，要么是改web.config，要么是用flash，要么是用一些第三方控件，然而这些解决问题的方法要么很麻烦，比如改配置，要么不稳定，比如文件上G以后，上传要么死掉，要么卡住，通过设置web.config并不能很好的解决这些问题。

这是一个Html5统治浏览器的时代，在这个新的时代，这种问题已被简化并解决，我们可以利用Html5分片上传的技术，那么Plupload则是一个对此技术进行封装的前端脚本库，这个库的好处是可以自动检测浏览器是否支持html5技术，不支持再检测是否支持flash技术，甚至是sliverlight技术，如果支持，就使用检测到的技术。

那么这个库到哪里下载，怎么搭建呢，比较懒的童鞋还是用Install-Package Plupload搞定吧，一个命令搞定所有事

下面给出一个例子，使用自已定义的控件来使用Plupload (Plupload也有自己的界面可以用)，如下

Plupload支持的功能这里就不细说了，什么批量上传，这里我没有用到，主要是感觉它支持的事件非常丰富，文件选取后的事件，文件上传中的事件(可获得文件的上传进度)，文件上传成功的事件，文件上传失败的事件，等等

我的例子主要是上传一个单个文件，并显示上传的进度条(使用jquery的一个进度条插件)

下面的例子主要是为文件上传交给 UploadCoursePackage.ashx 来处理

            /******************************************************ProgressBar********************************************************/            var progressBar = $("#loading").progressbar({ width: '500px', color: '#B3240E', border: '1px solid #000000' });            /******************************************************Plupload***********************************************************/            //实例化一个plupload上传对象            var uploader = new plupload.Uploader({                browse_button: 'browse', //触发文件选择对话框的按钮，为那个元素id                runtimes: 'html5,flash,silverlight,html4',//兼容的上传方式                url: "Handlers/UploadCoursePackage.ashx", //后端交互处理地址                max_retries: 3,     //允许重试次数                chunk_size: '10mb', //分块大小                rename: true,  //重命名                dragdrop: false, //允许拖拽文件进行上传                unique_names: true, //文件名称唯一性                filters: { //过滤器                    max_file_size: '999999999mb', //文件最大尺寸                    mime_types: [ //允许上传的文件类型                        { title: "Zip", extensions: "zip" },                        { title: "PE", extensions: "pe" }                    ]                },                //自定义参数 （键值对形式） 此处可以定义参数                multipart_params: {                    type: "misoft"                },                // FLASH的配置                flash_swf_url: "../Scripts/plupload/Moxie.swf",                // Silverligh的配置                silverlight_xap_url: "../Scripts/plupload/Moxie.xap",                multi_selection: false //true:ctrl多文件上传, false 单文件上传              });            //在实例对象上调用init()方法进行初始化            uploader.init();            uploader.bind('FilesAdded', function (uploader, files) {                $("#<