文章为转载过来的,还没时间研究,先记录一下:
1,给文件一个独立的url,要求文件上传至该地址
这种情况下,需要一个上传组件,比如异步上传组件,ajaxfileupload.js
2,没有给文件一个独立的url,而是跟其他字段一起上传
解决方案一:直接是一个form表单
- <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请求。
使用例子:完整版详见附件
- //初始化文件上传组件
- 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;
- }