如何實現jQuery的Ajax文件上傳,PHP如實文件上傳.
AJAX上傳文件,PHP上傳文件。
【PHP檔案上傳】
在開始之前,我覺得是有必要把通WEB上傳檔案的原理簡單說一下的。
實際上,這裡不管是PHP,JSP,還是ASP處理上傳的文件,其實都是WEB早已把文件上傳到伺服器了,我們只是運用上傳處理函數來處理上傳的文件。
而處理函數一般都是用PHP,JSP,ASP等服務端語言來實現的。那麼如何透過WEB(HTTP協定來上傳檔案呢?)你需要類似以下的HTML程式碼:
test.html
<form action="do_file_upload.php" method="post" enctype="multipart/form-data"> <p>Pictures: <input type="file" name="picture" /> <input type="submit" value="Send" /> </p> </form>
注意:enctype="multipart/form-data",是必要的,它告訴FORM表這個是一文件上傳類型,一旦這次請求成功後,文件就被上傳到了伺服器的臨時資料夾中,
至於到達目的地後,文件將會被怎麼樣處理那就是PHP,JSP,ASP的事了。
(不過,你不要高興的太早,如果該文件沒有被移動到其它地方也沒有被改名,則該文件將在表單請求結束時被刪除。所以我們要寫一個處理上傳文件的腳本)
這裡我們用PHP來處理
do_file_upload.php
<?php $error = ""; //上传文件出错信息 $msg = ""; $fileElementName = 'picture'; $allowType = array(".jpg",".gif",".png"); //允许上传的文件类型 $num = strrpos($_FILES['picture']['name'] ,'.'); $fileSuffixName = substr($_FILES['picture']['name'],$num,8);//此数可变 $fileSuffixName = strtolower($fileSuffixName); //确定上传文件的类型 $upFilePath = 'd:/'; //最终存放路径 if(!empty($_FILES[$fileElementName]['error'])) { switch($_FILES[$fileElementName]['error']) { case '1': $error = '传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值'; break; case '2': $error = '上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值'; break; case '3': $error = '文件只有部分被上传'; break; case '4': $error = '没有文件被上传'; break; case '6': $error = '找不到临时文件夹'; break; case '7': $error = '文件写入失败'; break; default: $error = '未知错误'; } }elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none') { $error = '没有上传文件.'; }else if(!in_array($fileSuffixName,$allowType)) { $error = '不允许上传的文件类型'; }else{ ); if($ok === FALSE){ $error = '上传失败'; } } ?>
另註:關於$_FILES數組
此數組包含有所有上傳的文件資訊,即記錄下了上傳文件時的相關資訊。
以上範例中 $_FILES 陣列的內容如下所示。我們假設檔案上傳欄位的名稱如上例所示,為 userfile。名稱可隨意命名。
$_FILES['userfile']['name']
客戶端機器檔案的原名稱。
$_FILES['userfile']['type']
檔案的 MIME 類型,如果瀏覽器提供此資訊的話。一個例子是“image/gif”。不過此 MIME 類型在 PHP 端並不檢查,因此不要想當然認為有這個值。
$_FILES['userfile']['size']
已上傳檔案的大小,單位為位元組。
$_FILES['userfile']['tmp_name']
檔案上傳後在服務端儲存的暫存檔案名稱。
$_FILES['userfile']['error']
和該檔案上傳相關的錯誤代碼。此項目是在 PHP 4.2.0 版本中增加的。
【AJAX檔案上傳】
其實就是實作無刷新式的檔案上傳。可採用IFRAME文件上傳原理。
實際上在用PHP上傳檔案時。 。 。只能用$_FILES形式,但是若我們只是單一的用JS方式取其ID,如..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真實際上傳的(但還是有很多人這樣做,剛開始時我也是)。
可是功能上又要要求實現所謂的“非同步上傳”,怎麼辦呢? ?只能藉助第三方的元件,或自己寫一個(在網頁裡嵌入一個IFRAME)。但如果是考慮開發時間,那以用第三方的,這裡有一個不錯的jQuery的Ajax檔案上傳的元件,是「ajaxfileupload.js",其元件下載地址為:http://www.phpletter.com/ ,下載完畢裡面有一個php的應用程式demo,很容易看懂的。
流程:
(1 )前端上檔案的程式碼: test.php
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ajaxfileupload.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload ( { url:'doajaxfileupload.php', //你处理上传文件的服务端 secureuri:false, fileElementId:'img', dataType: 'json', success: function (data) { alert(data.file_infor); } } ) return false; } </script>
對應的HTML為:
<input id="img" type="file" size="45" name="img" class="input"> <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
這樣客戶端就完成了。
(2) 再伺服器端時 doajaxfileupload.php
此處為了簡單的偵測是否真正的傳值過來了,你可以將它存起來了。
$file_infor = var_export($_FILES,true);
php檔案時,你又看到了熟悉的資訊了:
array( 'name'=>'lamp.jpg', 'type'=>'image/pjpeg', 'tmp_name'=>'c:\windows\temp\phpFA.tmp', 'error'=>0, 'size'=>3127 )
<?php $upFilePath = "d:/"; ); if($ok === FALSE){ echo json_encode('file_infor'=>'上传失败'); }else{ echo json_encode('file_infor'=>'上传成功'); } ?>