- 浏览: 3291589 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 26281zccst转载 HTML5本地存储的前身就是Cookie,H ... -
[移动端]专用的meta
2015-03-04 15:31 8224作者:zccst <meta name=" ... -
[html5]触摸事件(touchstart、touchmove和touchend)
2015-02-13 20:28 29507作者:zccst 参考文章 ... -
meta name=viewport含义
2015-02-12 16:29 3921作者:zccst viewport中文 ... -
doctype和compatModel相关
2015-01-04 19:30 677作者:zccst 一、doctype 1,严格模式与混杂模 ... -
【转义字符】HTML 字符实体 < >: &等
2014-11-18 18:56 22849作者:zccst 2014-12-10 又 ... -
挖掘input type=file的新知识
2014-11-13 18:23 3054作者:zccst 文件上传,这个问题始终一知半解,今天又近真 ... -
div+css布局总结
2014-09-04 10:48 1395作者:zccst 3,position布局 #wrap ... -
attr与prop的区别
2014-07-09 18:20 912作者:zccst jQuery在1.6.1 ... -
HTML <label> 标签的 for 属性
2014-07-04 17:14 1990作者:zccst for 属性规定 label 与哪个表单元 ... -
设置frameset的高度
2014-01-26 13:22 2673zccst转载 原文: 这是使用frameset做的,在宽 ... -
天气接口API
2012-02-02 17:32 1308把下面代码粘贴到自己的页面里,就能显示天气了。 <if ... -
form表单深入理解
2011-11-23 20:12 2129作者:zccst form表单 一、表单基础 作用:用来向服 ... -
表单之input file的使用特点及在php.ini中的相关参数设置
2011-11-23 20:08 23051,控件 <input type= "fi ... -
文件编码
2011-07-04 18:35 1178今天第一次留意文件的编码格式。 改变方式:另存为时,可选择 ... -
html5新知识点
2011-05-12 22:53 1833作者:zccst 新技术 http://timelineap ... -
HTML 和 XHTML 区别
2011-05-12 22:24 1039这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说, ... -
表单与ajax一并使用
2011-04-22 13:35 1157表单与ajax一并使用 一、表单需要注意的地方。 form ...
相关推荐
mitmproxy代理抓包mock文件
在java web应用中,进行用例实现时,很多情况难以模拟,比如数据库用例,如果直接通过连接数据库进行测试,导致用例对环境依赖很大,这时,可以通过mock技术可以模拟构造数据环境,从而进行单元测试,这里提供有实现...
mock-fs 是个可配置的 mock 文件系统,允许内存和 mock 文件系统短暂支持 Node 的内置 fs module 。这个允许用户对一组 mock 文件进行测试,而不是对一群测试装置。 标签:mockfs
var provinces = [{ "name": "北京市", "id": "110000" }, { "name": "天津市", "id": "120000" }, { "name": "河北省", "id": "130000" }, { "name": "山西省", "id": "140000" }, { ...}, {
简单的mockServer、模拟后台生成数据、启动后像后台一样直接调用接口
mock.js 依赖文件
mock练习
Classes contained in spring-mock.jar: org.springframework.mock.jndi.ExpectedLookupTemplate.class org.springframework.mock.jndi.SimpleNamingContext.class org.springframework.mock.jndi....
mock
对应《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》博客
ApiMock操作文档
mock测试实战
Django搭建mock系统
junit mock 测试用的啊 csdn 垃圾
mock.js 离线教程
在window或者linux上,模拟一个mock接口,可以实现等同的接口效果,本人测试过
it is the cfa mock question, which is for 2013 June
mock&mysql;问题
Mock对象教程.pdf