php 異步上傳圖片幾種方法總結

2024-09-04 11:45:02

字體：大中小

來源：轉載

供稿：網友

要實現異步上傳圖片方法有常用的有二種,一種是利用iframe實現,另一種是借助于ajax來實現一般用第三方插件了,上傳圖片form提交target到一個隱藏的iframe里,代碼如下 :

form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe">



</form>

<iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>

然后后臺處理完上傳圖片邏輯后返回給前臺,利用ajax修改當前頁面DOM對象實現無刷新上傳圖片的友好功能,實例代碼如下:a.html

<form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST">

        <input name="submit" id="submit" value="" type="hidden">

        <label>上傳文件: <input name="test_file" type="file" id="test_file" size="48"></label>

        <input type="image" value="立即上傳" id="submit_btn">

</form>

<iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>

PHP代碼如下:

<?php

if ($_FILES["test_file"]["error"] > 0)

  {

  echo "Error: " . $_FILES["test_file"]["error"] . "<br />";

  }//開源代碼Vevb.com

else

  {

//這里的判斷圖片屬性的方法就不寫了。自己擴展一下。

  $filetype=strrchr($_FILES["test_file"]["name"],".");

  $filetype=substr($filetype,1,strlen($filetype));

  $filename="img/".time("YmdHis").".".$filetype;

  move_uploaded_file($_FILES["test_file"]["tmp_name"],$filename);

  echo '<script >alert(1)</script>';

  $return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerHTML='".$dataimgpath."'";

  echo "<script >alert('上傳成功')</script>";

  echo "<script>{$return}</script>";

  }

?>

其實jquery ajax圖片異步上傳,HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">

<head>

  <title>圖片異步上傳</title>

</head>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<link type="text/css" rel="stylesheet" href="css/index.css">

<body>

<div class="frm">

  <form name="uploadFrom" id="uploadFrom" action="upload.php" method="post"  target="tarframe" enctype="multipart/form-data">

   <input type="file" id="upload_file" name="upfile">

  </form>

  <iframe src=""  width="0" height="0" style="display:none;" name="tarframe"></iframe>

</div>

<div id="msg">

</div>

</body>

</html>

index.js,代碼如下:

$(function(){

$("#upload_file").change(function(){

$("#uploadFrom").submit();

});

});

function stopSend(str){

var im="<img src='upload/images/"+str+"'>";

$("#msg").append(im);

}

upload.php

<?php

$file=$_FILES['upfile'];

$name=rand(0,500000).dechex(rand(0,10000)).".jpg";

move_uploaded_file($file['tmp_name'],"upload/images/".$name);

//調用iframe父窗口的js 函數

echo "<script>parent.stopSend('$name')</script>";

?>