html5 file ajax,javascript - Using HTML5 file uploads with AJAX and jQuery - Stack Overflow

清疚 2022-10-07 04:49 162阅读 0赞

With jQuery (and without FormData API) you can use something like this:

function readFile(file)\{

var loader = new FileReader();

var def = $.Deferred(), promise = def.promise();

//--- provide classic deferred interface

loader.onload = function (e) \{ def.resolve(e.target.result); \};

loader.onprogress = loader.onloadstart = function (e) \{ def.notify(e); \};

loader.onerror = loader.onabort = function (e) \{ def.reject(e); \};

promise.abort = function () \{ return loader.abort.apply(loader, arguments); \};

loader.readAsBinaryString(file);

return promise;

\}

function upload(url, data)\{

var def = $.Deferred(), promise = def.promise();

var mul = buildMultipart(data);

var req = $.ajax(\{

url: url,

data: mul.data,

processData: false,

type: "post",

async: true,

contentType: "multipart/form-data; boundary="+mul.bound,

xhr: function() \{

var xhr = jQuery.ajaxSettings.xhr();

if (xhr.upload) \{

xhr.upload.addEventListener('progress', function(event) \{

var percent = 0;

var position = event.loaded || event.position; /\*event.position is deprecated\*/

var total = event.total;

if (event.lengthComputable) \{

percent = Math.ceil(position / total \* 100);

def.notify(percent);

\}

\}, false);

\}

return xhr;

\}

\});

req.done(function()\{ def.resolve.apply(def, arguments); \})

.fail(function()\{ def.reject.apply(def, arguments); \});

promise.abort = function()\{ return req.abort.apply(req, arguments); \}

return promise;

\}

var buildMultipart = function(data)\{

var key, crunks = \[\], bound = false;

while (!bound) \{

bound = $.md5 ? $.md5(new Date().valueOf()) : (new Date().valueOf());

for (key in data) if (~data\[key\].indexOf(bound)) \{ bound = false; continue; \}

\}

for (var key = 0, l = data.length; key < l; key++)\{

if (typeof(data\[key\].value) !== "string") \{

crunks.push("--"+bound+"\\r\\n"+

"Content-Disposition: form-data; name=\\""+data\[key\].name+"\\"; filename=\\""+data\[key\].value\[1\]+"\\"\\r\\n"+

"Content-Type: application/octet-stream\\r\\n"+

"Content-Transfer-Encoding: binary\\r\\n\\r\\n"+

data\[key\].value\[0\]);

\}else\{

crunks.push("--"+bound+"\\r\\n"+

"Content-Disposition: form-data; name=\\""+data\[key\].name+"\\"\\r\\n\\r\\n"+

data\[key\].value);

\}

\}

return \{

bound: bound,

data: crunks.join("\\r\\n")+"\\r\\n--"+bound+"--"

\};

\};

//----------

//---------- On submit form:

var form = $("form");

var $file = form.find("\#file");

readFile($file\[0\].files\[0\]).done(function(fileData)\{

var formData = form.find(":input:not('\#file')").serializeArray();

formData.file = \[fileData, $file\[0\].files\[0\].name\];

upload(form.attr("action"), formData).done(function()\{ alert("successfully uploaded!"); \});

\});

With FormData API you just have to add all fields of your form to FormData object and send it via $.ajax(\{ url: url, data: formData, processData: false, contentType: false, type:"POST"\})

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 canvas background.src,html - HTML5 generate canvas background image - Stack Overflow

CSS \wrapper canvas \{ position: relative; \} \wrapper canvas \{ border: 1px solid

不念不忘少年蓝@/ 2022年10月12日 04:07/ 0 赞/ 157 阅读

相关 html5 summary,HTML5: How to Use
and
Tags

Among several new tags that are available in HTML5, Specifications (such as: figure, fig

待我称王封你为后i/ 2022年10月10日 15:50/ 0 赞/ 57 阅读

相关 html5 scrolling,javascript - Horizontal Scrolling on Canvas. HTML5 - Stack Overflow

Here's a pretty basic implementation: http://jsfiddle.net/CQPeU/ var can = document.get

电玩女神/ 2022年10月09日 05:57/ 0 赞/ 38 阅读

相关 edge html5播放,html - Video recording with Edge using HTML5 - Stack Overflow

I am trying to record video using HTML5 API. I want this solution to be cross platform a

曾经终败给现在/ 2022年10月07日 15:58/ 0 赞/ 34 阅读

相关 html5 file ajax,javascript - Using HTML5 file uploads with AJAX and jQuery - Stack Overflow

With jQuery (and without FormData API) you can use something like this: function readFi

清疚/ 2022年10月07日 04:49/ 0 赞/ 163 阅读

相关 html5 imports,html - HTML5 Imports not working - Stack Overflow

The correct to do this is through server side pages includes or through JavaScript. PHP

Myth丶恋晨/ 2022年10月04日 14:54/ 0 赞/ 28 阅读

相关 html5中file对象

`<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" type="text/html;charset=G

红太狼/ 2022年09月21日 11:45/ 0 赞/ 211 阅读

相关 HTML5 Mobile Upload

HTML5移动端图片上传并前端预览用到了HTML5的FileReader对象，主要思想是由于移动端的网络不比PC快，故需要做上传前预览，采用base64编码目前是比较好的方

淡淡的烟草味﹌/ 2022年08月03日 00:28/ 0 赞/ 143 阅读

相关基于html5 File API文件操作

> 文章来源：小青年原创 > 发布时间：2016-08-16 > 关键词：blob，File，FileReader，DataURI，URL > 转载需标注本文

蔚落/ 2022年06月18日 05:16/ 0 赞/ 245 阅读

相关 HTML5中File对象初探

在 HTML 5 中，JavaScript 得以获得更多的权限来处理文件，而不再像这之前，只能获得一个 file input 的 DOM。根据W3C的草案，JavaScript

r囧r小猫/ 2021年07月27日 02:37/ 0 赞/ 398 阅读