form裡面檔案上傳並預覽

標籤：form裡面檔案上傳並預覽

其實form裡面是不能嵌套form的，如果form裡面有圖片上傳和其他input框，我們希望上傳圖片並預覽圖片，然後將其他input框填寫完畢，再提交整個表單的話，有兩種方式！

方式一：點擊上傳按鈕的連結彈出上傳頁面，上傳檔案，上傳完畢再返回表單頁面；這種比較簡單，其實就是表單頁面的上傳按鈕僅僅是一個連結，僅用於開啟上傳檔案的彈出頁面；

方式二：就是表單裡面有<input type="file" name="picture"/>，點擊上傳按鈕後，會在上傳按鈕旁邊有圖片預覽，這種其實圖片也沒有上傳到伺服器，而是將圖片做了個本地預覽，當填寫完其他input框內容，提交後才開始上傳的！

其完整代碼如下：

<script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">     function showImg(obj){         var objUrl = getObjectURL(obj.files[0]);         if (objUrl) {              $(obj).before(‘<img src="‘+ objUrl +‘"  width="100px;">&nbsp;&nbsp;‘);          }      }     function getObjectURL(file) {         var url = null ;         if (window.createObjectURL!=undefined) {              url = window.createObjectURL(file) ;         } else if (window.URL!=undefined) {              url = window.URL.createObjectURL(file) ;         } else if (window.webkitURL!=undefined) {              url = window.webkitURL.createObjectURL(file) ;         }         return url ;     }</script>//檔案上傳表單<form method="post" action="index.php" enctype="multipart/form-data">     <input name="picture" id="picture" style="position:absolute;clip:rect(0 0 0 0);" onchange="showImg(this);" type="file">     <label style="cursor:pointer;width:80px;height:30px;background-color:#00e3e3;text-align:center;line-height:30px;color:#FFFFFF;box-shadow: 2px 2px 2px #888888;" for="picture">上傳LOGO</label>     <input name="sub" type="submit" value="提交"/></form>//檔案上傳php代碼<?php$file = @$_FILES[‘picture‘];//得到傳輸的資料//得到檔案名稱$name = $file[‘name‘];$type = strtolower(substr($name,strrpos($name,‘.‘)+1)); //得到檔案類型，並且都轉化成小寫$allow_type = array(‘jpg‘,‘jpeg‘,‘gif‘,‘png‘); //定義允許上傳的類型//判斷檔案類型是否被允許上傳if(!in_array($type, $allow_type)){    //如果不被允許，則直接停止程式運行    return ;}//判斷是否是通過HTTP POST上傳的if(!is_uploaded_file($file[‘tmp_name‘])){    //如果不是通過HTTP POST上傳的    return ;}$upload_path = "D:/now/"; //上傳檔案的存放路徑//開始移動檔案到相應的檔案夾if(move_uploaded_file($file[‘tmp_name‘],$upload_path.$file[‘name‘])){    return $upload_path.$file[‘name‘];}else{    echo "Failed!";}?>

form裡面檔案上傳並預覽