1,给文件一个独立的url,要求文件上传至该地址
这种情况下,需要一个上传组件,比如异步上传组件,ajaxfileupload.js
2,没有给文件一个独立的url,而是跟其他字段一起上传
解决方案一:直接是一个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请求。
使用例子:完整版详见附件
//初始化文件上传组件 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; }
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
