本文執行個體為大家分享了php表單檔案iframe非同步上傳的具體代碼，供大家參考，具體內容如下
1.表單中放置iframe元素；
2.檔案上傳控制項內容變化的時候觸發JS設定表單的action為處理檔案上傳的img_upload_process.php檔案，並且將表單的target設定為iframe，讓iframe去提交到伺服器進行檔案上傳；
3.img_upload_process.php中處理檔案上傳成功後，將上傳成功儲存的檔案路徑回傳給表單中隱藏欄位；
4.點擊表單提交按鈕的時,JS設定表單action為接收表單資料的form_process.php檔案，表單的target設定為_self。
表單：asyn_uplaod.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圖片非同步上傳</title></head><body><!-- application/x-www-form-urlencoded 預設編碼類別型 --><!-- multipart/form-data 多媒體傳輸協議 ,方法必須是post 既可以發送文本資料，也支援位元據上傳 --><form action="" method="post" enctype="multipart/form-data"> 使用者名稱: <input type="text" name="username" /><br /> 上傳頭像: <input type="file" id="avator" name="avator" onchange="startUpload(this.form)" /> <iframe frameborder='0' width='0' height='0' name="uploadframe"></iframe> <input type="hidden" id="save_path" name="save_path" /> <span id="loading"></span> <br /> <img width='100' height='100' id='uploaded_img' /> <br /> <input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" /></form><script>function startUpload(formObj){ document.getElementById('loading').innerHTML = '上傳中...'; formObj.action = 'img_upload_process.php'; formObj.target = 'uploadframe'; formObj.submit(); }function formSubmit(formObj) { formObj.action = 'form_process.php'; formObj.target = '_self'; //清空檔案上傳內容，防止重複提交 var fileObj = document.getElementById('avator') ; // for IE, Opera, Safari, Chrome if (fileObj.outerHTML) { fileObj.outerHTML = fileObj.outerHTML; } else { // FF(包括3.5) fileObj.value = ""; } formObj.submit(); }</script></body></html>
處理檔案上傳：img_upload_process.php
<?phpinclude 'Upload.class.php';$file = $_FILES['avator'];$upload = new Upload();//上傳工具類對象if($save_path = $upload->up($file)){//上傳成功 echo <<<STR <script> window.parent.document.getElementById('uploaded_img').src = "$save_path"; window.parent.document.getElementById('loading').innerHTML = '上傳成功'; window.parent.document.getElementById('save_path').value = "$save_path"; </script>STR;}else{ $error = $upload->error(); echo <<<STR <script> window.parent.document.getElementById('uploaded_img').src = ""; window.parent.document.getElementById('loading').innerHTML = "上傳失敗: $error"; </script>STR;}
檔案上傳工具類：Upload.class.php
<?phpclass Upload{ private $path; //檔案上傳目錄 private $max_size; //上傳檔案大小限制 private $errno; //錯誤資訊號 private $mime = array('image/jpeg','image/png','image/gif');//允許上傳的檔案類型 /** * 建構函式, * @access public * @param $path string 上傳的路徑 */ public function __construct($path = './' ){ $this->path = $path; $this->max_size = 1000000; } /** * 檔案上傳的方法，分目錄存放檔案 * @access public * @param $file array 包含上傳檔案資訊的數組 * @return mixed 成功返回上傳的檔案名稱，失敗返回false */ public function up($file){ //判斷檔案是否是通過 HTTP POST 上傳，防止惡意欺騙 /* if (! is_uploaded_file($file['tmp_name'])) { $this->errno = 5; //設定錯誤資訊號為5，表示非法上傳 return false; } */ //判斷是否從瀏覽器端成功上傳到伺服器端 if ($file['error'] == 0) { # 上傳到臨時檔案夾成功,對臨時檔案進行處理 //上傳類型判斷 if (!in_array($file['type'], $this->mime)) { # 類型不對 $this->errno = -1; return false; } //判斷檔案大小 if ($file['size'] > $this->max_size) { # 大小超出設定檔的中的上傳限制 $this->errno = -2; return false; } //擷取存放上傳檔案的目錄 $sub_path = date('Ymd').'/'; if (!is_dir($this->path . $sub_path)) { # 不存在該目錄，建立之 mkdir($this->path . $sub_path); } //檔案重新命名,由當前日期 + 隨機數 + 尾碼名 $file_name = date('YmdHis').uniqid().strrchr($file['name'], '.'); //準備就緒了，開始上傳 if (move_uploaded_file($file['tmp_name'], $this->path . $sub_path . $file_name)) { # 移動成功 return $sub_path . $file_name; } else { # 移動失敗 $this->errno = -3; return false; } } else { # 上傳到臨時檔案夾失敗，根據其錯誤號碼設定錯誤號碼 $this->errno = $file['error']; return false; } } /** * 多檔案上傳方法 * @access public * @param $file array 包含上傳檔案資訊的數組，是一個二維數組 * @return array 成功返回上傳的檔案名稱構成的數組, ?如果有失敗的則不太好處理了 */ public function multiUp($files){ //在多檔案上傳時，上傳檔案資訊 又是一個多維陣列，如$_FILES['userfile']['name'][0]，$_FILES['userfile']['name'][1] //我們只需要遍曆該數組，得到每個上傳檔案的資訊，依次調用up方法即可 foreach ($files['name'] as $key => $value) { # code... $file['name'] = $files['name'][$key]; $file['type'] = $files['type'][$key]; $file['tmp_name'] = $files['tmp_name'][$key]; $file['error'] = $files['error'][$key]; $file['size'] = $files['size'][$key]; //調用up方法，完成上傳 $filename[] = $this->up($file); } return $filename; } /** * 擷取錯誤資訊,根據錯誤號碼擷取相應的錯誤提示 * @access public * @return string 返回錯誤資訊 */ public function error(){ switch ($this->errno) { case -1: return '請檢查你的檔案類型，目前支援的類型有'.implode(',', $this->mime); break; case -2: return '檔案超出系統規定的大小，最大不能超過'. $this->max_size; break; case -3: return '檔案移動失敗'; break; case 1: return '上傳的檔案超過了 php.ini 中 upload_max_filesize 選項限制的值,其大小為'.ini_get('upload_max_filesize'); break; case 2: return '上傳檔案的大小超過了 HTML 表單中 MAX_FILE_SIZE 選項指定的值,其大小為' . $_POST['MAX_FILE_SIZE']; break; case 3: return '檔案只有部分被上傳'; break; case 4: return '沒有檔案被上傳'; break; case 5: return '非法上傳'; break; case 6: return '找不到臨時檔案夾'; break; case 7: return '檔案寫入臨時檔案夾失敗'; break; default: return '未知錯誤,靈異事件'; break; } }}
處理表單提交：form_process.php
<?phpvar_dump($_REQUEST);var_dump($_FILES);
點擊表單提交按鈕結果：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
