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

作者：zccst

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

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


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

[b]解决方案一：直接是一个form表单[/b]

<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表单，所以失败。
详见地址：[url]https://github.com/appendto/jquery-mockjax[/url]

解决办法：暂无解


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

动态生成form。

加上附加字段

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

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

		//初始化文件上传组件
		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;
		}

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]