php 异步上传图片几种方法总结
要实现异步上传图片方法有常用的有二种,一种是利用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 />"; } 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/scxz/fs4960.html
随意转载^^但请附上教程地址。