搜尋
首頁後端開發php教程php表單檔案中關於iframe如何非同步上傳的案例

本文實例為大家分享了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=&#39;0&#39; width=&#39;0&#39; height=&#39;0&#39; name="uploadframe"></iframe> 
 <input type="hidden" id="save_path" name="save_path" />
 <span id="loading"></span> <br /> 
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/bf5b437281da9920f0761ec19c1de6a0-0.jpg?x-oss-process=image/resize,p_40"  class="lazy"     style="max-width:90%"php表單檔案中關於iframe如何非同步上傳的案例" > <br />
 <input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" />

</form>

<script>

function startUpload(formObj){
  document.getElementById(&#39;loading&#39;).innerHTML = &#39;上传中...&#39;; 
  formObj.action = &#39;img_upload_process.php&#39;; 
  formObj.target = &#39;uploadframe&#39;; 
  formObj.submit(); 
}


function formSubmit(formObj) {
 formObj.action = &#39;form_process.php&#39;; 
 formObj.target = &#39;_self&#39;;

 //清空文件上传内容,防止重复提交
 var fileObj = document.getElementById(&#39;avator&#39;) ;

 // 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


#
<?php
include &#39;Upload.class.php&#39;;

$file = $_FILES[&#39;avator&#39;];
$upload = new Upload();//上传工具类对象


if($save_path = $upload->up($file)){//上传成功
 echo <<<STR
 <script> 
  window.parent.document.getElementById(&#39;uploaded_img&#39;).src = "$save_path";
  window.parent.document.getElementById(&#39;loading&#39;).innerHTML = &#39;上传成功&#39;; 
  window.parent.document.getElementById(&#39;save_path&#39;).value = "$save_path"; 
 </script>
STR;

}else{
 $error = $upload->error();
 echo <<<STR
 <script>
  window.parent.document.getElementById(&#39;uploaded_img&#39;).src = "";
  window.parent.document.getElementById(&#39;loading&#39;).innerHTML = "上传失败: $error";
 </script>
STR;

}

檔案上傳工具類別:Upload.class.php


<?php
class Upload{
 private $path; //文件上传目录
 private $max_size; //上传文件大小限制
 private $errno; //错误信息号
 private $mime = array(&#39;image/jpeg&#39;,&#39;image/png&#39;,&#39;image/gif&#39;);//允许上传的文件类型

 /**
  * 构造函数,
  * @access public
  * @param $path string 上传的路径
  */
 public function __construct($path = &#39;./&#39; ){
  $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[&#39;tmp_name&#39;])) {
   $this->errno = 5; //设置错误信息号为5,表示非法上传
   return false;
  }
  */

  //判断是否从浏览器端成功上传到服务器端
  if ($file[&#39;error&#39;] == 0) {
   # 上传到临时文件夹成功,对临时文件进行处理
   //上传类型判断
   if (!in_array($file[&#39;type&#39;], $this->mime)) {
    # 类型不对
    $this->errno = -1; 
    return false;
   }

   //判断文件大小
   if ($file[&#39;size&#39;] > $this->max_size) {
    # 大小超出配置文件的中的上传限制
    $this->errno = -2;
    return false;
   }

   //获取存放上传文件的目录
   $sub_path = date(&#39;Ymd&#39;).&#39;/&#39;;
   if (!is_dir($this->path . $sub_path)) {
    # 不存在该目录,创建之
    mkdir($this->path . $sub_path);
   }

   //文件重命名,由当前日期 + 随机数 + 后缀名
   $file_name = date(&#39;YmdHis&#39;).uniqid().strrchr($file[&#39;name&#39;], &#39;.&#39;);

   //准备就绪了,开始上传
   if (move_uploaded_file($file[&#39;tmp_name&#39;], $this->path . $sub_path . $file_name)) {
    # 移动成功
    return $sub_path . $file_name;
   } else {
    # 移动失败
    $this->errno = -3;
    return false;
   }

  } else {
   # 上传到临时文件夹失败,根据其错误号设置错误号
   $this->errno = $file[&#39;error&#39;];
   return false;
  }

 }

 /**
  * 多文件上传方法
  * @access public
  * @param $file array 包含上传文件信息的数组,是一个二维数组
  * @return array 成功返回上传的文件名构成的数组, ?如果有失败的则不太好处理了
  */
 public function multiUp($files){
  //在多文件上传时,上传文件信息 又是一个多维数组,如$_FILES[&#39;userfile&#39;][&#39;name&#39;][0],$_FILES[&#39;userfile&#39;][&#39;name&#39;][1]
  //我们只需要遍历该数组,得到每个上传文件的信息,依次调用up方法即可
  foreach ($files[&#39;name&#39;] as $key => $value) {
   # code...
   $file[&#39;name&#39;] = $files[&#39;name&#39;][$key];
   $file[&#39;type&#39;] = $files[&#39;type&#39;][$key];
   $file[&#39;tmp_name&#39;] = $files[&#39;tmp_name&#39;][$key];
   $file[&#39;error&#39;] = $files[&#39;error&#39;][$key];
   $file[&#39;size&#39;] = $files[&#39;size&#39;][$key];
   //调用up方法,完成上传
   $filename[] = $this->up($file);
  }
  return $filename;
 }

 /**
  * 获取错误信息,根据错误号获取相应的错误提示
  * @access public
  * @return string 返回错误信息
  */
 public function error(){
  switch ($this->errno) {
   case -1:
    return &#39;请检查你的文件类型,目前支持的类型有&#39;.implode(&#39;,&#39;, $this->mime);
    break;
   case -2:
    return &#39;文件超出系统规定的大小,最大不能超过&#39;. $this->max_size;
    break;
   case -3:
    return &#39;文件移动失败&#39;;
    break;
   case 1:
    return &#39;上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值,其大小为&#39;.ini_get(&#39;upload_max_filesize&#39;);
    break;
   case 2:
    return &#39;上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值,其大小为&#39; . $_POST[&#39;MAX_FILE_SIZE&#39;];
    break;
   case 3:
    return &#39;文件只有部分被上传&#39;;
    break;
   case 4:
    return &#39;没有文件被上传&#39;;
    break;
   case 5:
    return &#39;非法上传&#39;;
    break;
   case 6:
    return &#39;找不到临时文件夹&#39;;
    break;
   case 7:
    return &#39;文件写入临时文件夹失败&#39;;
    break;
   default:
    return &#39;未知错误,灵异事件&#39;;
    break;
  }
 }
}

#處理表單提交:form_process.php


<?php
var_dump($_REQUEST);
var_dump($_FILES);

點選表單提交按鈕結果:

php表單檔案中關於iframe如何非同步上傳的案例

#

以上是php表單檔案中關於iframe如何非同步上傳的案例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
PHP如何識別用戶的會話?PHP如何識別用戶的會話?May 01, 2025 am 12:23 AM

phpIdentifiesauser'ssessionSessionSessionCookiesAndSessionId.1)whiwsession_start()被稱為,phpgeneratesainiquesesesessionIdStoredInacookInAcookInAcienamedInAcienamedphpsessIdontheuser'sbrowser'sbrowser.2)thisIdallowSphptpptpptpptpptpptpptpptoretoreteretrieetrieetrieetrieetrieetrieetreetrieetrieetrieetrieetremthafromtheserver。

確保PHP會議的一些最佳實踐是什麼?確保PHP會議的一些最佳實踐是什麼?May 01, 2025 am 12:22 AM

PHP會話的安全可以通過以下措施實現:1.使用session_regenerate_id()在用戶登錄或重要操作時重新生成會話ID。 2.通過HTTPS協議加密傳輸會話ID。 3.使用session_save_path()指定安全目錄存儲會話數據,並正確設置權限。

PHP會話文件默認存儲在哪裡?PHP會話文件默認存儲在哪裡?May 01, 2025 am 12:15 AM

phpsessionFilesArestoredIntheDirectorySpecifiedBysession.save_path,通常是/tmponunix-likesystemsorc:\ windows \ windows \ temponwindows.tocustomizethis:tocustomizEthis:1)useession_save_save_save_path_path()

您如何從PHP會話中檢索數據?您如何從PHP會話中檢索數據?May 01, 2025 am 12:11 AM

ToretrievedatafromaPHPsession,startthesessionwithsession_start()andaccessvariablesinthe$_SESSIONarray.Forexample:1)Startthesession:session_start().2)Retrievedata:$username=$_SESSION['username'];echo"Welcome,".$username;.Sessionsareserver-si

您如何使用會議來實施購物車?您如何使用會議來實施購物車?May 01, 2025 am 12:10 AM

利用會話構建高效購物車系統的步驟包括:1)理解會話的定義與作用,會話是服務器端的存儲機制,用於跨請求維護用戶狀態;2)實現基本的會話管理,如添加商品到購物車;3)擴展到高級用法,支持商品數量管理和刪除;4)優化性能和安全性,通過持久化會話數據和使用安全的會話標識符。

您如何在PHP中創建和使用接口?您如何在PHP中創建和使用接口?Apr 30, 2025 pm 03:40 PM

本文解釋瞭如何創建,實施和使用PHP中的接口,重點關注其對代碼組織和可維護性的好處。

crypt()和password_hash()有什麼區別?crypt()和password_hash()有什麼區別?Apr 30, 2025 pm 03:39 PM

本文討論了PHP中的crypt()和password_hash()的差異,以進行密碼哈希,重點介紹其實施,安全性和對現代Web應用程序的適用性。

如何防止PHP中的跨站點腳本(XSS)?如何防止PHP中的跨站點腳本(XSS)?Apr 30, 2025 pm 03:38 PM

文章討論了通過輸入驗證,輸出編碼以及使用OWASP ESAPI和HTML淨化器之類的工具來防止PHP中的跨站點腳本(XSS)。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。