作者:zccst
1,给文件一个独立的url,要求文件上传至该地址
这种情况下,需要一个上传组件,比如异步上传组件,ajaxfileupload.js
2,没有给文件一个独立的url,而是跟其他字段一起上传
[b]解决方案一:直接是一个form表单[/b]
(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请求。
使用例子:完整版详见附件
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
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]