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 +'" alt="" 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"  onchange="showImg(this);" type="file">
     <label  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!";
}
?>