位置: 编程技术 - 正文
推荐整理分享jQuery+formdata实现上传进度特效遇到的问题,希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!
总结我做HTML5文件上传插件遇到的技术问题
先贴上源码:fileupload-html5.js(PS:公司使用seajs框架)
问题列表
1. JQUERY.AJAX没有监听上传进度的ONPROGRESS事件。
2. XMLHTTPREQUEST(XHR)跨域
问题解答
1. JQUERY没有给出ONPROGRESS事件的接口,必须从其他接口中找到原生XHR对象。
jQuery.ajax()返回的是jqXHR对象。jqXHR模仿XHR(原生),但没有模仿实现XHR的所有方法和属性(如:.upload),即使jqXHR增加了一个特有方法(如:.promise())。所以jqXHR并不是XHR的超集。
XHR的upload属性指向XMLHttpRequestUpload(IE是XMLHttpRequestEventTarget),该对象的onprogress事件可以监听上传进度。既然jQ没有给出这个功能的api,但jQ某些数据上传方式是使用XHR的,所以我们可以从其它api中找到XHR。在XHR发送数据之前绑定onprogress事件可以实现上传进度功能。
我从OPTIONS参数配置中找到两个与XHR有关的属性:
- XHR:回调创建XMLHTTPREQUEST对象。
xhr()返回值是XHR,提供给jQ使用,即发送数据就是用这个XHR。我们可以通过xhr创建一个回调函数覆盖它,同样返回XHR,但在此绑定onprogress事件。
所以我们应该这样做:
- XHRFIELDS:一对“文件名-文件值”组成的映射,用于设定原生的 XHR对象。
xhrFields属性指向jQ内部创建的XHR,我们可以根据xhrFields获得XMLHttpRequest。由于xhrFields的值只能是json对象,所以不能以下面方式获取。
我们可以借助XHR的onsendstart事件,如下:
2. XMLHTTPREQUESTⅡ(XHR)支持跨域,但需要后台允许。
根据后台给的接口,我需要增加一个参数cros。但我将这个参数与文件同事提交,却提示跨域限制。最后将这个参数放在url才行。
原来XHR跨域是有两次请求的,第一次是验证请求,浏览器根据请求目的地址自动发出options请求。若通过,才能发出自定义的post请求。所以将参数放在post请求里,第一次请求没有cros参数,即不能通过。
浅析jQuery Ajax请求参数和返回数据的处理 刚接触学会用jQueryajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上,一颗赛艇。之前很早接触
jQuery实现验证年龄简单思路 这段代码假定环境是一个ID为age-form的form,三个ID分别为day,month,year。$("#age-form").submit(function(){varday=$("#day").val();varmonth=$("#month").val();varyear=$("#year").val(
jQuery使用contains过滤器实现精确匹配方法详解 本文实例讲述了jQuery使用contains过滤器实现精确匹配的方法。分享给大家供大家参考,具体如下::contains选择器选取包含指定字符串的元素。该字符串可
标签: jQuery+formdata实现上传进度特效遇到的问题
本文链接地址:https://www.jiuchutong.com/biancheng/382997.html 转载请保留说明!友情链接: 武汉网站建设