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

来源：互联网发布：天刀太白捏脸数据编辑：程序博客网时间：2024/06/05 17:45

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

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;  
}  

0 0