| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

PHP JQ 异步上传并立即显示图片

提交页面:

<! 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中的axtion="处理图片的有效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= "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 >

 

 

就这样,我们就可以很轻易的把一个图片异步上传并且立即显示到前台页面中。

来自:http://my.oschina.net/zerodeng/blog/313773

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1410792776570.html
PHP 文件上传