文件上传的两种情况及mock时对应处理办法

文章为转载过来的，还没时间研究，先记录一下：

1，给文件一个独立的url，要求文件上传至该地址 

这种情况下，需要一个上传组件，比如异步上传组件，ajaxfileupload.js 

2，没有给文件一个独立的url，而是跟其他字段一起上传 

解决方案一：直接是一个form表单 

Html代码  


<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>  

  

<form name="excelupload" id="excelupload" action="/xx/createExcelXX.action" method="POST" enctype="multipart/form-data" target="upload_target">  

  

    <input name="XXName" type="text"  />  

  

    <input type="file" name="file" id="file" size="45" />  

  

</form>  

（1）由于form会跳转页面，设置其target跳转到iframe，这样就不会发生页面跳转了。 
（2）如果提交按钮不在form里，可以使用$("#formId").submit();方法 

如果是mock阶段，如何测试？ 

直接报错： 
"NetworkError: 404 Not Found - http://localhost/xx/createExcelXX.action" 
原因：mockjax只支持ajax请求，不支持form表单，所以失败。 
详见地址：https://github.com/appendto/jquery-mockjax 

解决办法：暂无解 

解决方案二：生成临时form模拟Ajax请求 

动态生成form。 

加上附加字段 

如果是mock阶段，如何测试？ 
可以测试，因为此时已经是ajax请求。 

使用例子：完整版详见附件 

Js代码  


//初始化文件上传组件  

initUploader:function(){  

    var _this = this;  

  

    var splitPathRe = /^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;  

    var splitPath = function(filename) {  

        return splitPathRe.exec(filename).slice(1);  

    };  

  

    //Excel上传控件  

    this.batch_uploader = new Uploader({  

        trigger: '#file',  

        name: 'file',  

        action: CREATE_EXCELFEED_URL,  

        accept: 'application/vnd.ms-excel',  

        data: {},  

        dataType:'json',  

        multiple: false  

    }).change(function(files) {  

        for (var i = 0; i < files.length; i++) {  

            var fileType = splitPath(files[i].name)[3];  

            if (fileType !== ".xls") {  

                alert("文件格式错误, 请上传.xls格式文件!");  

            } else {  

                $('.batch-upload-filename').html(files[i].name);  

            }  

        }  

    }).success(function(response) {  

        console.log(response);  

        /* 

        var res; 

        if(/msie/.test(navigator.userAgent.toLowerCase())) { 

            res = $.parseJSON($(response).text()); 

        } else { 

            res = $.parseJSON(response); 

        } 

        if (res.status == '1') { 

            alert("文件上传成功!"); 

        } else { 

            _this.fail(res); 

        }*/  

        _this.$el.find('.batch-upload-filename').html(' 未选择文件');  

    }).error(function(file) {  

        console.log(file);  

    });  

},  

//销毁上传组件  

destoryUploader:function(){  

    this.batch_uploader = null;  

    $("form.earth-upload").remove();  

},  

  

  

  

//创建  

create:function(){  

    var _this = this;  

  

    //校验未通过  

    if(!this.validate()){  

        return false;  

    }  

    var params = this.collectSubmitParams();  

  

    var feedType = this.model.get("feedType");  

    if(feedType === "xml"){//自动上传  

          

    }else if(feedType === "excel"){//手动上传  

        //console.log(this.$el.find("#excelupload")[0].action);  

        //this.$el.find("#excelupload")[0].action = CREATE_EXCELFEED_URL;  

        //console.log(this.$el.find("#excelupload")[0].action);  

        //this.$el.find("#excelupload").submit();  

  

  

  

        if(this.batch_uploader._uploaders[0]._files) {  

            $(".errormsg").hide();  

            console.log(this.batch_uploader._uploaders[0].form);  

            this.batch_uploader._uploaders[0].form.append(_this.createInputs(params));  

            this.batch_uploader.submit();  

        } else {  

            $(".errormsg").html("请先选择要上传的文件，再提交！").show();  

            return false;  

        }  

    }  

    return false;  

},  

  

  

//上传控件的patch  

createInputs: function (data) {  

    if (!data) return [];  

    var inputs = [], i;  

    for (var name in data) {  

        i = document.createElement('input');  

        i.type = 'hidden';  

        i.name = name;  

        i.value = data[name];  

        inputs.push(i);  

    }  

    return inputs;  

}