- 浏览: 3322433 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 26386zccst转载 HTML5本地存储的前身就是Cookie,H ... -
[移动端]专用的meta
2015-03-04 15:31 8276作者:zccst <meta name=" ... -
[html5]触摸事件(touchstart、touchmove和touchend)
2015-02-13 20:28 29575作者:zccst 参考文章 ... -
meta name=viewport含义
2015-02-12 16:29 4062作者:zccst viewport中文 ... -
doctype和compatModel相关
2015-01-04 19:30 714作者:zccst 一、doctype 1,严格模式与混杂模 ... -
【转义字符】HTML 字符实体 < >: &等
2014-11-18 18:56 22989作者:zccst 2014-12-10 又 ... -
挖掘input type=file的新知识
2014-11-13 18:23 3108作者:zccst 文件上传,这个问题始终一知半解,今天又近真 ... -
div+css布局总结
2014-09-04 10:48 1430作者:zccst 3,position布局 #wrap ... -
attr与prop的区别
2014-07-09 18:20 967作者:zccst jQuery在1.6.1 ... -
HTML <label> 标签的 for 属性
2014-07-04 17:14 2070作者:zccst for 属性规定 label 与哪个表单元 ... -
设置frameset的高度
2014-01-26 13:22 2735zccst转载 原文: 这是使用frameset做的,在宽 ... -
天气接口API
2012-02-02 17:32 1347把下面代码粘贴到自己的页面里,就能显示天气了。 <if ... -
form表单深入理解
2011-11-23 20:12 2174作者:zccst form表单 一、表单基础 作用:用来向服 ... -
表单之input file的使用特点及在php.ini中的相关参数设置
2011-11-23 20:08 23441,控件 <input type= "fi ... -
文件编码
2011-07-04 18:35 1240今天第一次留意文件的编码格式。 改变方式:另存为时,可选择 ... -
html5新知识点
2011-05-12 22:53 1865作者:zccst 新技术 http://timelineap ... -
HTML 和 XHTML 区别
2011-05-12 22:24 1069这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说, ... -
表单与ajax一并使用
2011-04-22 13:35 1197表单与ajax一并使用 一、表单需要注意的地方。 form ...
相关推荐
这两个文件分别对应Windows和Linux系统的启动脚本。`mock.bat`是批处理文件,用于在Windows环境下启动Moco Runner服务,而`mock.sh`是bash脚本,适用于Linux或Mac OS。它们都包含了运行Moco Runner的命令,将`moco-...
当匹配到预设的请求模式时,MockServer会返回预设的响应,这可以是静态的数据、动态生成的数据或者基于某种逻辑的响应。 在"mock3"这个压缩包中,我们可以推测它可能包含MockServer的第三版相关资源,如配置文件、...
`模拟mock.zip`这个压缩包文件显然与Mock技术相关,其中包含的资源可能是用于帮助理解和实现Mock功能的文档或工具。下面将详细阐述Mock的基本概念、Mock的使用场景、Mock的语法规范以及如何在实际项目中应用Mock。 ...
mitmproxy代理抓包mock文件
它允许开发者在不依赖实际环境或第三方服务的情况下,创建模拟对象来代替真实组件,以便进行单元测试和集成测试。这样可以提高测试效率,减少测试复杂性,并确保代码的独立性和可测试性。 标题中的"Mock"通常指的是...
在软件开发中,尤其是在测试阶段,MockServer可以替代真实的后端服务,允许开发者在没有实际依赖的情况下进行单元测试和集成测试。这个“mockserver1.zip”文件包含了启动和使用MockServer所需的一些基本组件和配置...
mock-fs 是个可配置的 mock 文件系统,允许内存和 mock 文件系统短暂支持 Node 的内置 fs module 。这个允许用户对一组 mock 文件进行测试,而不是对一群测试装置。 标签:mockfs
在java web应用中,进行用例实现时,很多情况难以模拟,比如数据库用例,如果直接通过连接数据库进行测试,导致用例对环境依赖很大,这时,可以通过mock技术可以模拟构造数据环境,从而进行单元测试,这里提供有实现...
2. **上传RPM包到CentOS系统**:将包含`Mock` RPM包的压缩文件上传到你的CentOS 7服务器的一个目录,例如 `/home/user/download`。 3. **解压RPM包**:在终端中,使用`cd`命令进入包含RPM包的目录,然后使用`tar`...
1. `autospec=True`: 当设置为True时,mock对象会尽可能模仿原对象的行为,包括方法签名和异常处理。 2. `spec`和`spec_set`: 可以指定一个对象,让mock对象的接口与该对象一致。 通过上述方式,我们可以利用`...
var provinces = [{ "name": "北京市", "id": "110000" }, { "name": "天津市", "id": "120000" }, { "name": "河北省", "id": "130000" }, { "name": "山西省", "id": "140000" }, { ...}, {
根据这些规则,Mock平台会在接收到相应的请求时,返回预设的响应数据,这有助于开发者在没有真实服务的情况下进行功能开发和测试。 总的来说,Mock平台是服务端开发和测试的强大助手,通过零侵入的设计和JVM ...
比如Web前端或APP在调用接口时可能会遇到502等服务端错误,这种情况下需要有一种机制来模拟服务端的异常行为,以便对客户端的异常处理逻辑进行测试。 Mock技术在测试过程中的作用非常关键,它能够模拟不容易获取的...
这个压缩包“MockServer_Files”包含了部署MockServer环境所必需的一些组件,但值得注意的是,它并没有包含MySQL数据库的相关文件,这可能意味着你需要自己准备MySQL环境来存储MockServer的配置或日志数据。...
( 毫秒 )、Set Comments设置一个注释 , 来提示当前规则的作用、Edit Response 编辑当前规则设置的响应文件(当响应文件是文本文件时)、Generate File 生成响应文件 ( 这个我不知道其作用 , 如果有知道的 , 望告知 )...
mock.js 依赖文件
Mock.js 是一种流行的前端数据模拟技术,用于模拟后端接口的响应数据,使得前端开发可以独立于后端开发,提高开发效率和体验。本文将从 Mock.js 的安装、使用、方法、注意事项等方面进行总结和分析。 安装和使用 ...
Mock 介绍及原理,前后端 Mock 方法 Mock 是一种测试技术,用于模拟某些不容易构造或者不容易获取的对象,以便测试。在实际工作中,可能会遇到依赖接口不通、异常数据难模拟、单元测试干扰等问题,引入 Mock 可以...