【IT168 技术】在上一讲《玩转HTML5应用实战：灵活拖拉文件》文章中，我们学习了如何利用HTML5将文件拖拉到浏览器中，并读取出被拖拉文件的类型和其他文件相关信息。在本文中，将介绍如何利用Ajax及HTML5异步将文件上传到服务端。
上传表单页面的设置
先来看下上传表单页面的设置，代码如下：
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>HTML File Upload</legend>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Files to upload:</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
<div id="filedrag">or drop files here</div>
</div>
<div id="submitbutton">
<button type="submit">Upload Files</button>
</div>
</fieldset>
</form>
<fieldset>
<legend>HTML File Upload</legend>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Files to upload:</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
<div id="filedrag">or drop files here</div>
</div>
<div id="submitbutton">
<button type="submit">Upload Files</button>
</div>
</fieldset>
</form>
这里，我们为表单的提交设置为upload.php，用来处理上传的文件，在表单中并且规定了上传的图片的大小不超过300K。
上传的Javascript
在对文件进行上传处理的Javascript中，代码如下：
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
UploadFile(f);
}
}
在上个教程中，已经对ParseFile(f)进行了介绍，现在着重看下UploadFile这个方法的代码，代码如下：
function UploadFile(file) {
var xhr = new XMLHttpRequest();
if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
}
}
var xhr = new XMLHttpRequest();
if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
}
}
在上面的代码中，使用了目前只有在FireFox和Chrome中才支持的XmlHttpRequest2对象，XmlHttpRequest2是对原先大家熟悉的xmlhttprequest的加强，目前还没最后定案，可以参考http://dev.w3.org/2006/webapi/XMLHttpRequest-2/的描述。在上面的代码中，首先是判断了上传文件的类型是否为图片文件以及大小是否符合要求，如果符合要求的话，则调用send方法发送文件到服务端，并且这里设置了HTTP文件头X_FILENAME为上传的文件名。
在PHP服务端的代码中，首先通过HTTP头来判断是否通过AJAX上传还是普通的表单上传。
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
// AJAX调用
file_put_contents(
'uploads/' . $fn,
file_get_contents('php://input')
);
echo "$fn uploaded";
exit();
}
if ($fn) {
// AJAX调用
file_put_contents(
'uploads/' . $fn,
file_get_contents('php://input')
);
echo "$fn uploaded";
exit();
}
如果$fn中设置了值，则调用使用file_put_contents方法，将文件复制到uploads文件夹，而如果是通过普通表单的上传，则作如下判断：
