blocks|key|291023|text|这并不是很难。首先，看看FileReader+Interface。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|291024|因此，当表单提交时，捕获提交过程并|291025|var+file+=+document.getElementById('fileBox').files[0];+//Files[0]+=+1st+file
var+reader+=+new+FileReader();
reader.readAsText(file,+'UTF-8');
reader.onload+=+shipOff;
//reader.onloadstart+=+...
//reader.onprogress+=+...+<--+Allows+you+to+update+a+progress+bar.
//reader.onabort+=+...
//reader.onerror+=+...
//reader.onloadend+=+...


function+shipOff(event)+{
++++var+result+=+event.target.result;
++++var+fileName+=+document.getElementById('fileBox').files[0].name;+//Should+be+'picture.jpg'
++++$.post('/myscript.php',+{+data:+result,+name:+fileName+},+continueSubmission);
}|code-block|syntax|javascript|291026|然后，在服务器端(即myscript.php)：|291027|$data+=+$_POST['data'];
$fileName+=+$_POST['name'];
$serverFile+=+time().$fileName;
$fp+=+fopen('/uploads/'.$serverFile,'w');+//Prepends+timestamp+to+prevent+overwriting
fwrite($fp,+$data);
fclose($fp);
$returnData+=+array(+"serverFile"+=>+$serverFile+);
echo+json_encode($returnData);|291028|或者类似的东西。我可能错了(如果我错了，请纠正我)，但这应该将文件存储为服务器上的/uploads/中的类似1287916771myPicture.jpg的形式，并在服务器上使用包含fileName的JSON变量(对continueSubmission()函数)进行响应。|style|CODE|291029|查看fwrite()和jQuery.post()。|291030|在上面的页面中，详细介绍了如何使用readAsBinaryString()、readAsDataUrl()和readAsArrayBuffer()来满足您的其他需求(例如图像、视频等)。|291031|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface|1|http://us2.php.net/manual/en/function.fwrite.php|2|http://docs.jquery.com/Post|3|http://dev.w3.org/2006/webapi/FileAPI/#readAsBinaryString|4|http://dev.w3.org/2006/webapi/FileAPI/#readAsDataURL|5|http://dev.w3.org/2006/webapi/FileAPI/#readAsArrayBuffer^0|C|K|0|0|0|0|0|0|15|9|1I|N|30|K|0|2|8|B|D|2|8|1|B|D|2|0|H|K|12|F|1I|J|H|K|3|12|F|4|1I|J|5|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1K|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1L|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1M|8|@$A|1N|B|1O|Q|R]|$A|1P|B|1Q|Q|R]|$A|1R|B|1S|Q|R]]|9|@]|C|$]]|$1|S|3|T|5|6|7|1T|8|@$A|1U|B|1V|Q|R]|$A|1W|B|1X|Q|R]]|9|@$A|1Y|B|1Z|1|20]|$A|21|B|22|1|23]]|C|$]]|$1|U|3|V|5|6|7|24|8|@$A|25|B|26|Q|R]|$A|27|B|28|Q|R]|$A|29|B|2A|Q|R]]|9|@$A|2B|B|2C|1|2D]|$A|2E|B|2F|1|2G]|$A|2H|B|2I|1|2J]]|C|$]]|$1|W|3|-4|5|6|7|2K|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]|16|$5|Z|10|11|C|$12|17]]|18|$5|Z|10|11|C|$12|19]]|1A|$5|Z|10|11|C|$12|1B]]|1C|$5|Z|10|11|C|$12|1D]]]]

It's not too hard. Firstly, take a look at <a href="http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface" rel="noreferrer">FileReader Interface</a>.

So, when the form is submitted, catch the submission process and

<pre><code>var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... &lt;-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
 var result = event.target.result;
 var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
 $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}
</code></pre>

Then, on the server side (i.e. myscript.php):

<pre><code>$data = $_POST['data'];
$fileName = $_POST['name'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" =&gt; $serverFile );
echo json_encode($returnData);
</code></pre>

Or something like it. I may be mistaken (and if I am, please, correct me), but this should store the file as something like <code>1287916771myPicture.jpg</code> in <code>/uploads/</code> on your server, and respond with a JSON variable (to a <code>continueSubmission()</code> function) containing the fileName on the server.

Check out <a href="http://us2.php.net/manual/en/function.fwrite.php" rel="noreferrer"><code>fwrite()</code></a> and <a href="http://docs.jquery.com/Post" rel="noreferrer"><code>jQuery.post()</code></a>.

On the above page it details how to use <a href="http://dev.w3.org/2006/webapi/FileAPI/#readAsBinaryString" rel="noreferrer"><code>readAsBinaryString()</code></a>, <a href="http://dev.w3.org/2006/webapi/FileAPI/#readAsDataURL" rel="noreferrer"><code>readAsDataUrl()</code></a>, and <a href="http://dev.w3.org/2006/webapi/FileAPI/#readAsArrayBuffer" rel="noreferrer"><code>readAsArrayBuffer()</code></a> for your other needs (e.g. images, videos, etc).

blocks|key|293376|text|有了jQuery+(没有FormData+API)，你可以使用如下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|293377|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="%2Bmul.bound,
++++++++xhr:+function()+{
++++++++++++var+xhr+=+jQuery.ajaxSettings.xhr();
++++++++++++if+(xhr.upload)+{

++++++++++++++++xhr.upload.addEventListener('progress',+function(event)+{
++++++++++++++++++++var+percent+=+0;
++++++++++++++++++++var+position+=+event.loaded+%7C%7C+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%2B%2B){
++++++++if+(typeof(data[key].value)+!==+"string")+{
++++++++++++crunks.push("--"%2Bbound%2B"\r\n"%2B
++++++++++++++++"Content-Disposition:+form-data;+name=\""%2Bdata[key].name%2B"\";+filename=\""%2Bdata[key].value[1]%2B"\"\r\n"%2B
++++++++++++++++"Content-Type:+application/octet-stream\r\n"%2B
++++++++++++++++"Content-Transfer-Encoding:+binary\r\n\r\n"%2B
++++++++++++++++data[key].value[0]);
++++++++}else{
++++++++++++crunks.push("--"%2Bbound%2B"\r\n"%2B
++++++++++++++++"Content-Disposition:+form-data;+name=\""%2Bdata[key].name%2B"\"\r\n\r\n"%2B
++++++++++++++++data[key].value);
++++++++}
++++}

++++return+{
++++++++bound:+bound,
++++++++data:+crunks.join("\r\n")%2B"\r\n--"%2Bbound%2B"--"
++++};
};

//----------
//----------+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!");+});
});|code-block|syntax|javascript|293378|使用FormData应用程序接口，您只需将表单的所有字段添加到FormData对象并通过$.ajax发送({+url:+url，data:+formData，processData:+false，contentType:+false，type:"POST"})|293379|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>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 &lt; 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!"); });
});
</code></pre>

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"})

Admittedly, there are similar questions lying around on Stack Overflow, but it seems none quite meet my requirements.

Here is what I'm looking to do:

<ul>
<li>Upload an entire form of data, one piece of which is a single file</li>
<li>Work with Codeigniter's file upload library</li>
</ul>

Up until here, all is well. The data gets in my database as I need it. But I'd also like to submit my form via an AJAX post:

<ul>
<li>Using the native HTML5 File API, not flash or an iframe solution</li>
<li>Preferably interfacing with the low-level <code>.ajax()</code> jQuery method</li>
</ul>

I think I could imagine how to do this by auto-uploading the file when the field's value changes using pure javascript, but I'd rather do it all in one fell swoop on for submit in jQuery. I'm thinking it's not possible to do via query strings as I need to pass the entire file object, but I'm a little lost on what to do at this point. 

Can this be achieved?

Using HTML5 file uploads with AJAX and jQuery

文件存储

数据库

服务器

jQuery

HTML5

JSON

诚然，在Stack Overflow上也有类似的问题，但似乎没有一个完全符合我的要求。这是我想要做的：上传整个形式的数据，其中一部分是single file 与Codeigniter的文件上传库配合使用到现在为止，一切都很好。数据在我需要的时候就会进入我的数据库。但我也想通过AJAX帖子提交我的表单：使用本机HTML5...

问通过AJAX和jQuery使用HTML5文件上传
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过AJAX和jQuery使用HTML5文件上传EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过AJAX和jQuery使用HTML5文件上传
EN