- 浏览: 3332956 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
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请求。
使用例子:完整版详见附件
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
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; }
如果您觉得本文的内容对您的学习有所帮助,您可以微信:

- uploader.rar (7.9 KB)
- 下载次数: 2
发表评论
-
[html5]localStorage代替Cookie? HTML5本地存储安全性
2015-03-20 17:53 26418zccst转载 HTML5本地存储的前身就是Cookie,H ... -
[移动端]专用的meta
2015-03-04 15:31 8290作者:zccst <meta name=" ... -
[html5]触摸事件(touchstart、touchmove和touchend)
2015-02-13 20:28 29604作者:zccst 参考文章 ... -
meta name=viewport含义
2015-02-12 16:29 4090作者:zccst viewport中文 ... -
doctype和compatModel相关
2015-01-04 19:30 729作者:zccst 一、doctype 1,严格模式与混杂模 ... -
【转义字符】HTML 字符实体 < >: &等
2014-11-18 18:56 23024作者:zccst 2014-12-10 又 ... -
挖掘input type=file的新知识
2014-11-13 18:23 3124作者:zccst 文件上传,这个问题始终一知半解,今天又近真 ... -
div+css布局总结
2014-09-04 10:48 1445作者:zccst 3,position布局 #wrap ... -
attr与prop的区别
2014-07-09 18:20 987作者:zccst jQuery在1.6.1 ... -
HTML <label> 标签的 for 属性
2014-07-04 17:14 2100作者:zccst for 属性规定 label 与哪个表单元 ... -
设置frameset的高度
2014-01-26 13:22 2756zccst转载 原文: 这是使用frameset做的,在宽 ... -
天气接口API
2012-02-02 17:32 1358把下面代码粘贴到自己的页面里,就能显示天气了。 <if ... -
form表单深入理解
2011-11-23 20:12 2187作者:zccst form表单 一、表单基础 作用:用来向服 ... -
表单之input file的使用特点及在php.ini中的相关参数设置
2011-11-23 20:08 23571,控件 <input type= "fi ... -
文件编码
2011-07-04 18:35 1259今天第一次留意文件的编码格式。 改变方式:另存为时,可选择 ... -
html5新知识点
2011-05-12 22:53 1878作者:zccst 新技术 http://timelineap ... -
HTML 和 XHTML 区别
2011-05-12 22:24 1083这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说, ... -
表单与ajax一并使用
2011-04-22 13:35 1209表单与ajax一并使用 一、表单需要注意的地方。 form ...
相关推荐
这两个文件分别对应Windows和Linux系统的启动脚本。`mock.bat`是批处理文件,用于在Windows环境下启动Moco Runner服务,而`mock.sh`是bash脚本,适用于Linux或Mac OS。它们都包含了运行Moco Runner的命令,将`moco-...
开发小程序需要掌握微信小程序开发框架或支付宝小程序开发框架,以及WXML(Weixin Markup Language)和WXSS(Weixin Style Sheets)这两种小程序特有的标记语言和样式表语言。 2. **灵石114同城电话本**:该应用...
随着Web服务技术的发展,特别是SOAP(Simple Object Access Protocol)和REST(Representational State Transfer)两种主流的服务模式的广泛应用,测试这些服务的需求也变得日益迫切。在SoapUI问世前,测试Web服务...
以上权限只是安卓系统众多权限中的一部分,每种权限都对应着不同的功能和数据访问需求。在开发应用时,合理申请和使用权限是确保应用功能完整性和用户隐私安全的重要环节。开发者应遵循最小权限原则,仅请求实现应用...