1. 程式人生 > >利用formdata非同步上傳圖片並預覽圖片

利用formdata非同步上傳圖片並預覽圖片

<img src="" style="width: 120px;margin-bottom: 5px" id="previewimg0">
<form action="" enctype="multipart/form-data" id="form0">
   <input type="file"  name="file" id="file0" onChange="preview(this,0)" style="width: 70px;margin-left: 25px">
</form>
function preview(obj,id){
       
var img = document.getElementById("previewimg"+id); img.src = window.URL.createObjectURL(obj.files[0]); var data = new FormData($('#form'+id)[0]); $.ajax({ url: 'uploadoption.php', type: 'POST', data: data, dataType: 'JSON', cache:
false, processData: false, contentType: false }).done(function(ret){ if(ret['isSuccess']){ img.src = window.URL.createObjectURL(obj.files[0]); }else{ alert('提交失敗'); } }); }
 1 <?php
 2 $file
= $_FILES['file'];//得到傳輸的資料 3 $Name = $file['name'];//得到檔名稱 4 5 $type = strtolower(substr($Name,strrpos($Name,'.')+1));//得到檔案型別。轉為小寫 6 $allow_type = array('jpg','jpeg','gif','png');//定義允許上傳的型別 7 //判斷檔案型別是否允許上傳 8 if(!in_array($type,$allow_type)){ 9 //如果不允許,直接停止 10 return; 11 } 12 //判讀是否通過http post上傳 13 if(!is_uploaded_file($file['tmp_name'])){ 14 return; 15 } 16 $upload_path = "image/";//上傳檔案的存放路徑 17 //開始移動檔案到相應的資料夾 18 if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){ 19 $response['isSuccess'] = true; 20 $response['photo'] = $upload_path.$file['name']; 21 }else{ 22 $response['isSuccess'] = false; 23 } 24 25 //$picture = $upload_path.$file['name']; 26 echo json_encode($response);