前端上传组件Plupload

Plupload有以下功能和特点：

1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

Plupload的使用方法可以分为以下几步：

1、引入js文件，plupload的源文件可以到https://github.com/moxiecode/plupload/tree/master/js上去下载

2、实例化一个plupload对象，传入一个配置参数对象进行各方面的配置。

3、调用plupload实例对象的init()方法进行初始化

4、在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中，会触发很多事件。我们可以通过这些事件来跟plupload进行交互。

5、实现你自己所注册的那些事件的监听函数，利用这些监听函数来进行更新UI、提示上传进度等工作。

参考： https://www.cnblogs.com/2050/p/3913184.html

        <button id="browse">选择文件</button>
        <button id="start_upload">开始上传</button>

<script src="plupload.full.min.js"></script>


        // 实例化一个plupload上传对象
        var fileName = "";
        var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
            browse_button : 'browse',
            url : 'index.php?r=project/addrealmap',
            file_data_name:'imgFile', // 指定文件上传时文件域的名称
            filters: {
                mime_types : [ //只允许上传图片
                    { title : "Image files", extensions : "jpg,png" }
                ],
                max_file_size : '10000kb', //最大只能上传400kb的文件
                prevent_duplicates : true //不允许选取重复文件
            },
            multipart_params:{ // 上传时的附加参数，以键/值对的形式传入
                '_csrf':csrfToken,
                'pId':pId,
                'pKey':pKey,
                'fileName':fileName
            },
            multipart:true, //  为true时将以multipart/form-data的形式来上传文件
            multi_selection:false // 是否可以在文件浏览对话框中选择多个文件，true为可以
        });
        // 在实例对象上调用init()方法进行初始化
        uploader.init();
        // 当文件添加到上传队列前触发
        uploader.bind('FileFiltered',function(uploader,files){
//           if($(".imgTable").find(".imgName").length !=0){
//               layer.msg("一次只能上传单张哦！", {icon: 5});
//           }
            $(".loadBg").show();
            $("#load-img").show();
        });
        // 当文件添加到上传队列后触发
        uploader.bind('FilesAdded',function(uploader,files){
            if(uploader.files.length == 1){
                var _fileName = files[0].name.split(".")[0];
                uploader.settings.multipart_params.fileName = _fileName;
            }else{
                uploader.files.splice(0,1);
                var _fileName = files[0].name.split(".")[0];
                uploader.settings.multipart_params.fileName = _fileName;
            }
            uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
        });
        // 上传成功
        uploader.bind('FileUploaded',function(uploader,file,responseObject){
            try{
                var project = JSON.parse(responseObject.response);
                if(project.result_code == 200){
                    $('.nowImg').html(upedImg+file.name);

                    layer.msg(project.result_desc, {icon: 1});
                    getImg(true);
                }else{
                    layer.msg(project.result_desc, {icon: 5});
                    uploader.stop();//停止文件上传
                }

            }catch(err){
//                console.log(err);
                uploader.stop();//停止文件上传
            }
            $(".loadBg").hide();
            $("#load-img").hide();
        });
        // 最后给"开始上传"按钮注册事件

//        document.getElementById('start_upload').onclick = function(){
//            uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
//            $(".maskingLayer").hide();
//            $(".importImg-pop").hide();
//        };