HTML5与Ajax强强联手演绎文件上传

深藏阁楼爱情的钟 2021-09-19 07:12 293阅读 0赞

在本文中，将介绍如何利用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>

这里，我们为表单的提交设置为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);

在上面的代码中，使用了目前只有在FireFox和Chrome中才支持的XmlHttpRequest2对象，XmlHttpRequest2是对原先大家熟悉的xmlhttprequest的加强，目前还没最后定案，可以参考[http://dev.w3.org/2006/webapi/XMLHttpRequest-2/][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();

如果$fn中设置了值，则调用使用file\_put\_contents方法，将文件复制到uploads文件夹，而如果是通过普通表单的上传，则作如下判断：

本文转自 wws5201985 51CTO博客，原文链接：http://blog.51cto.com/wws5201985/738542，如需转载请自行联系原作者