Jquery中文网 新宝娱乐城官网 www.z5nka.com.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery+FormData+文件上传+上传进度

新宝娱乐城体育打不开:jQuery+FormData+文件上传+上传进度

发布时间:2016-09-18   编辑:新宝娱乐城官网 www.z5nka.com.cn
jquery中文网为您提供jQuery+FormData+文件上传+上传进度等资源,欢迎您收藏本站,我们将为您提供最新的jQuery+FormData+文件上传+上传进度资源

新宝娱乐城官网 www.z5nka.com.cn 总结我做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的超集。

//下面是截取jQ内部的源码,$.ajax();返回的就是这个jqXHR(伪造XMLHttpRequest)
// Fake xhr
    jqXHR = {

        readyState: 0,

XHRupload属性指向XMLHttpRequestUpload(IE10是XMLHttpRequestEventTarget),该对象的onprogress事件可以监听上传进度。既然jQ没有给出这个功能的api,但jQ某些数据上传方式是使用XHR的,所以我们可以从其它api中找到XHR。在XHR发送数据之前绑定onprogress事件可以实现上传进度功能。

我从options参数配置中找到两个与XHR有关的属性:

- xhr:回调创建XMLHttpRequest对象。

xhr()返回值是XHR,提供给jQ使用,即发送数据就是用这个XHR。我们可以通过xhr创建一个回调函数覆盖它,同样返回XHR,但在此绑定onprogress事件。

//jQ源码
// Get a new xhr
var handle, i,
    xhr = s.xhr();//[回调]在这里,下面是open方法

// Open the socket
// Passing null username, generates a login popup on Opera (#2865)
if ( s.username ) {
    xhr.open( s.type, s.url, s.async, s.username, s.password );
} else {
    xhr.open( s.type, s.url, s.async );
}

所以我们应该这样做:

$.ajax({
    //.....
    xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        //绑定上传进度的回调函数
        xhr.upload.addEventListener('progress', progress, false);
        return xhr;//一定要返回,不然jQ没有XHR对象用了
    }
});
- xhrFields:一对“文件名-文件值”组成的映射,用于设定原生的 XHR对象。

xhrFields属性指向jQ内部创建的XHR,我们可以根据xhrFields获得XMLHttpRequest。由于xhrFields的值只能是json对象,所以不能以下面方式获取。

//错误例子
$.ajax({
    //......
    xhrFields: {
        upload.onprogress: function() {
            //语法错误
        }
    }
});

我们可以借助XHRonsendstart事件,如下:

$.ajax({
    //......
    xhrFields: {
        onsendstart: function() {
            //this是指向XHR
            this.upload.addEventListener('progress', progress, false);
        }
    }
});

2. XMLHttpRequestⅡ(XHR)支持跨域,但需要后台允许。

//后台需发送头部验证
if($_REQUEST['cros']) {
    header("Access-Control-Allow-Origin:请求的域名");
}

根据后台给的接口,我需要增加一个参数cros。但我将这个参数与文件同事提交,却提示跨域限制。最后将这个参数放在url才行。
原来XHR跨域是有两次请求的,第一次是验证请求,浏览器根据请求目的地址自动发出options请求。若通过,才能发出自定义的post请求。所以将参数放在post请求里,第一次请求没有cros参数,即不能通过。

您可能感兴趣的文章:
文件上传插件 jQuery File Upload
Web文件上传???Plupload
Web文件上传???Plupload
jQuery File Upload
jQuery File Upload
jQuery文件上传插件 jcUpload
jQuery异步上传插件
Jquery上传插件 uploadify v3.1使用说明
jQuery异步上传插件
jquery ajax提交整个表单元素的快捷办法

[关闭]
  • 王烜:当心单边主义在全球圈粉 2019-05-20
  • 天津170万亩夏粮收购展开 优质小麦收购价每公斤2.32元 2019-05-19
  • 2018 Yorkville Exotic Car Show kicks off in Toronto - Culture News - CQNEWS 2019-05-19
  • 一张图揭国产航母海试 新航母到底“新”在哪儿 2019-05-19
  • 老师您好,本文中的信件内容基本无错误.但现在的00后还会听您怎么在那里教育他怎么做人吗 2019-05-18
  • 【水到渠成共发展】南水润燕赵 江水惠民生 2019-05-18
  • 世界献血日:走近无名英雄“熊猫侠” 2019-05-18
  • 四价流感疫苗获批上市 2019-05-17
  • 看见百姓生活 角落里的理发师 2019-05-17
  • 昨天中国元首才接见了美国国务卿,说中美合作将造福于两国人民和世界人民。风雨同舟,靠不住啊。 2019-05-16
  • 学习新思想 千万师生同上一堂课 2019-05-16
  • 春夏季养生小常识 饮食一定要注意五多五少-美食资讯 2019-05-15
  • 美媒评选全球五大最危险核潜艇 中国无一入选 2019-05-15
  • 中共中央政治局召开会议 决定召开十九届二中全会 2019-05-15
  • 应战美国贸易战中国跟500亿 同等力度、同日开征关税 2019-05-14
  • 442| 685| 673| 714| 819| 774| 748| 442| 830| 917|