php 异步上传图片几种方法总结

作者: php100
时间: 2013-09-05
分类: php框架

要实现异步上传图片方法有常用的有二种，一种是利用iframe实现，另一种是借助于ajax来实现一般用第三方插件了。

上传图片form提交target到一个隐藏的iframe里，

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

</form>

然后后台处理完上传图片逻辑后返回给前台，利用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 />";
} 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>
<html xmlns="http://www.w3.org/1999/xhtml" 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>
  <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>";
?>

文章地址:http://www.phprm.com/frame/php1005301.html

转载随意^^请带上本文地址!

标签：none

PHP入门

php 异步上传图片几种方法总结

发表留言