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 >