首页 > 代码库 > PHP JS JQ 异步上传并立即显示图片
PHP JS JQ 异步上传并立即显示图片
http://my.oschina.net/zerodeng/blog/313773
提交页面：
<! DOCTYPE html>< html>< head>< meta charset ="GB2312" >< title> Insert title here </title >< script type ="text/javascript" src= "jquery.js"></ script >< script type ="text/javascript" >$(document).ready( function (){ $( "#i_1" ).load( function(){ var url = $("#i_1" ).contents().find( "#pic").html(); if (url != null){ $( "#tag_img" ).attr("src" ,url); } });});</ script></ head>< body>< img id= "tag_img" src = "" />< form enctype ="multipart/form-data" action= "upload_pic.php" method ="post" target= "upload_target"> <input type= "file" name ="img" class= "file" value ="" /> <input type= "submit" name ="uploadimg" value= "上传" /></ form>< iframe id= "i_1" name = "upload_target"></ iframe ></ body></ html>
重点：
1.form中的action="处理图片的有效PHP页面"
2.form中的target="iframe的name属性值"
3.JS中必须要有可以等待iframe加载完后处理iframe返回过来的图片地址。
处理图片的PHP程序页面:
<?php$tmp_name = $_FILES[ ‘img‘][ ‘tmp_name‘];$name = $_FILES[ ‘img‘][ ‘name‘];move_uploaded_file($tmp_name, ‘./upload/‘.$name);$img = ‘./upload/‘.$name;?><! DOCTYPE html>< html>< head>< meta name ="viewport" content= "initial-scale=1.0, user-scalable=no" >< meta http-equiv ="Content-type" content= "text/html;charset:utf-8" >< script type ="text/javascript" src= "http://www.mamicode.com/jquery.js"></ script ></ head>< body>< div id= "pic" ><?php echo $img; ?></ div ></ body></ html>
重点:
1.$_FILE全局超级变量可以接收到POST过来的文件，HTML input的name就是$_FILE[‘name‘]
2.接下来可以做很多处理，如判断是不是图片，图片大小....
3.move_uploaded_file($tmp,$location)函数把图片移动到相应的路径中去，$tmp指的是文件的临时
地址，$location指的是文件移动收的相对路径(包含文件名的路径!)
4.想办法在这个处理页面中找一个地方安放一下处理好的图片。< div id= "pic" ><?php echo $img; ?></ div >
就这样，我们就可以很轻易的把一个图片异步上传并且立即显示到前台页面中。
PHP JS JQ 异步上传并立即显示图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。