HTML5與Ajax強強聯手 演繹文件上傳

在本文中，將介紹如何利用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 == "p_w_picpath/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();

　　}

　　若是$fn中設置了值，則調用使用file_put_contents方法，將文件複製到uploads文件夾，而若是是經過普通表單的上傳，則做以下判斷：