总结--上传插件Upload.js的使用

最近用了一个上传的插件，趁热总结一下
原文链接
简单说一下，这个插件可以上传很多种类型的文件，兼容性也可以，我这里只用到了图片的上传，所以就说这个功能了。先说一下上传图片的大致逻辑：
1.前端选中图片上传到服务器
2.服务器会自动返回图片在服务器的路径，在这个事件里面
3.将路径赋值给需要用到的地方
话不多说，上代码：

	<p class="upload_businessImg">
      <button type="button" id="upload_businessImg_btn" class="upload_businessImg_btn">上传</button>请上传营业执照扫描件或照片，<span class="businessImg_err_tip">图片格式JPEG、PNG、JPG、GIF，文件大小2M以内。</span>

       <input id="imgtoken" type="hidden" name="imgtoken" value=""><!--作为参数放在上传路径后面，看需求，可以没有这个参数，如果需求需要，则不能为空  如果为空会返回错误信息    意思是说 “令牌解析错误”  每个公司的项目里应该都有这个，是后端给出来的-->
       <input id="supplierid" type="hidden" name="supplierid" value=""><!--作为参数放在上传路径后面，看需求，可以没有这个参数，如果需求需要，则不能为空，如果为空会返回错误信息    意思是说 “用户权限受阻”  这个根据个人情况而定，每个公司的项目里应该都有这个，是后端给出来的-->
       <input id="functionname" type="hidden" name="functionname" value="ablu"><!-- 功能名 ，作为参数放在上传路径后面，看需求，可以没有这个参数，如果需求需要，则不能为空，   如果为空会返回错误信息  “the function is not registered!”  意思是说 “该函数未注册！” -->
     </p>

<!--下面是预览图片的框，只有一个框，当然也可以有多个框 -->
	<div class="isshow_preview_mask businessImg">
      <img id="businessImgSrc" src="" alt="">
      <div class="businessImg_mask">
        <div class="button_box">
          <button type="button" class="see_businessImg j_view_image">查看</button><button type="button" class="delt_businessImg del_img">删除</button>
        </div>
      </div>
    </diiv>

参数说明图片：

// 初始化上传事件
    $(document).ready(function(){
        initUploadify_businessImg();
    });

    // 判断图片格式及大小
    function judgePictureFormatSize( filType, err_tip, file_size ){
        if(filType == "jpg" || filType == "jpeg" || filType == "png" || filType == "gif" || file_size < 2 * 1024 * 1024){
            err_tip.css("color","#999");
            return true;
        }else{
            err_tip.css("color","#FF001A");
            return false;
        }
    };

    // 上传图片
    function initUploadify_businessImg() {
    	//一下各种参数的说明可以从顶部链接找到，或者看上面添加的图片
            var setting = {
                runtimes: 'html5,flash,silverlight,html4',	//默认"html5,flash,silverlight", 用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数，因为Plupload默认会根据你的其他的参数配置来选择 最合适的上传方式。如果没有特殊要求的话，Plupload会首先选择html5上传方式，如果浏览器不支持html5，则会使用flash或 silverlight，如果前面两者也都不支持，则会使用最传统的html4上传方式。如果你想指定使用某个上传方式，或改变上传方式的优先顺序，则你 可以配置该参数。
                browse_button: 'upload_businessImg_btn',	//触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身，也可以是该DOM元素的id
                container: $('#upload_businessImg_btn').parent()[0],		//用来指定Plupload所创建的html结构的父容器，默认为前面指定的browse_button的父元素。该参数的值可以是一个元素的id,也可以是DOM元素本身。
                url: '',	//这里的路径就是上传图片的基础路径，比如：https://XXX.XXX.com/uploadfile,路径后面要跟参数，见下面 uploader.setOption
                multipart: true,		//为true时将以multipart/form-data的形式来上传文件，为false 时则以二进制的格式来上传文件。html4上传方式不支持以二进制格式来上传文件，在flash上传方式中，二进制上传也有点问题。并且二进制格式上传还 需要在服务器端做特殊的处理。一般我们用multipart/form-data的形式来上传文件就足够了。
                http_method: 'get',	
                multi_selection: true,	//是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。默认true，即可以选择多个文件。需要注意的是，在某些不支持 多选文件的环境中，默认值是false。比如在ios7的safari浏览器中，由于存在bug，造成不能多选文件。当然，在html4上传方式中，也是 无法多选文件的。
                filters: {
                    mime_types : [ //只允许上传图片
                        { title : "Image files", extensions : "jpg,gif,png,jpeg" }
                      ],
                      max_file_size : '2048kb', //最大只能上传2048kb的文件
                },
                file_data_name: 'file',
                flash_swf_url: 'js/Moxie.swf',	//这个文件可以从本文章顶部的链接里面找，下载下来，文件的路径可以是相对的，也可以是绝对的
                silverlight_xap_url: 'js/Moxie.xap',	//同上
                init: {
                    PostInit: function(uploader) {
                        $('filelist').innerHTML = '';
                        $('uploadfiles').onclick = function() {
                            uploader.start();
                            return false;
                        }
                        ;
                    },
                    FilesAdded: function(uploader, files) {
                        plupload.each(files, function(file) {
                            var filType =  file.name ?  file.name.split('.') : [] ; 
                            var imgtoken = $("#imgtoken").val();
                            var functionname = $("#functionname").val();
                            var supplierid = $('#supplierid').val();
                            var businessImg_err_tip = $(".businessImg_err_tip");
                            if( judgePictureFormatSize( filType, businessImg_err_tip, file.size ) ){
                               uploader.setOption({
                                    url:"https://upload.dhgate.com/uploadfile?functionname=" + functionname + "&supplierid=" + supplierid + "&token=" + imgtoken
                                }); 
                               uploader.start();
                            }else{
                                return false;
                            }
                        });
                    },
                    FileUploaded: function(uploader, file, responseObject) {
                        if (responseObject != "") {
                            var s_value = window.eval("(" + responseObject.response + ")");
                            var imgurl = s_value.l_imgurl;
                            var businessImg_src = $("#businessImgSrc").attr("src");
                            console.log(s_value)
                            if( imgurl == null || undefined || "" ){
                                $(".businessImg_upload_err").text("抱歉，图片上传失败，请稍后再试。");
                                $("#businessImg_box").find("img[src='']").attr("src","");
                            }else{
                                $(".businessImg_upload_err").text("");
                                if ( businessImg_src == "" ) {
                                    businessImg_src = imgBaseUlr + "" + imgurl;
                                    $("#businessImgSrc").attr("src",businessImg_src);
                                }
                            } 
                        }
                    },
                    Error: function(uploader, err) {
                        $.each(uploader.files, function() {
                            $(".businessImg_upload_err").text("抱歉，图片上传失败，请稍后再试。");
                        })
                        return false
                    }
                }
            }
    }

要说坑的话，我遇到的是上面那几个隐藏域的input，基于业务需求传递参数，后台获取的参数到没什么，就是那个functionnme比较难搞，需要在公司某个系统里先注册，完了把functionname的值（也就是注册的事件名称）当作参数传回去作为验证。