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

时间 2020-01-09

标签 php 异步上传并当显示图片栏目 PHP 繁體版

原文原文链接

提交页面：javascript

<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8" >
<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.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>

重点：php

1.form中的action="处理图片的有效PHP页面"html

2.form中的target="iframe的name属性值"java

3.JS中必需要有能够等待iframe加载完后处理iframe返回过来的图片地址。jquery

处理图片的PHP程序页面:web

<?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.接下来能够作不少处理，如判断是否是图片，图片大小....post

3.move_uploaded_file($tmp,$location)函数把图片移动到相应的路径中去，$tmp指的是文件的临时ui

地址，$location指的是文件移动收的相对路径(包含文件名的路径!)

4.想办法在这个处理页面中找一个地方安放一下处理好的图片。< div id= "pic" ><?php echo $img; ?></ div >

就这样，咱们就能够很轻易的把一个图片异步上传而且当即显示到前台页面中。