js+php如何實現上傳圖片

時間 2019-12-08

原文原文鏈接

近期有一些朋友，在作上傳圖片這一塊的時候進度卡住了。有個朋友說，我已經在這個問題上浪費了一天了。
確實，對於新手而言，上傳圖片成了比較複雜的的一個事，今天整理了一下經常使用的兩種方式，讓新手輕鬆掌握上傳圖片的小難題。前端

（一）form表單上傳

這種方式簡單暴力，若是沒有特殊需求，數據和圖片一次性處理的時候，這種方式，最合適不過。ajax

<b>前端的代碼:</b>後端

&lt;form action="upload" method="post" enctype="multipart/form-data"&gt;
  &lt;input type="file" name="pic" /&gt;
  &lt;input type="submit" value="上傳" /&gt;
&lt;/form&gt;

action 請求的後端方法
enctype="multipart/form-data" 在使用包含文件上傳控件的表單時，必須使用該值。

<b>後端的代碼:</b>瀏覽器

public function upload(){
    // 獲取上傳的圖片
    $pic = $_FILES['pic']['tmp_name'];
    $upload_ret = false;

    if($pic){
        // 上傳的路徑，建議寫物理路徑
        $uploadDir = 'static/upload'; 
        // 建立文件夾  
        if(!file_exists($uploadDir)){        
            mkdir($uploadDir, 0777);    
        }    
        // 用時間戳來保存圖片，防止重複
        $targetFile = $uploadDir . '/' . time() . $_FILES['pic']['name'];    
        // 將臨時文件 移動到咱們指定的路徑，返回上傳結果
        $upload_ret = move_uploaded_file($pic, $targetFile) ? true : false;
    }

    return $upload_ret;
}

簡單的一個form表單上傳文件就搞定了！app

（二）ajax 無刷新上傳圖片

傳統的form表單提交會致使頁面刷新，可是在有些狀況下，咱們不但願頁面被刷新，這種時候咱們都是使用ajax的方式進行請求的。異步

不少人確定會想到JQuery的ajax操做，可是這樣的作法是沒用的，由於只能傳遞通常的參數，文件是沒法上傳的。
這個時候有一個叫作FormData的東西的出現拯救了咱們ide

關於FormData函數

XMLHttpRequest Level 2添加了一個新的接口FormData，利用FormData對象，咱們能夠經過JavaScript用一些鍵值對來模擬一系列表單控件，咱們還能夠使用XMLHttpRequest的send()方法來異步的提交這個"表單"。比起普通的ajax，使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件。
全部主流瀏覽器的較新版本都已經支持這個對象了，好比Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。post

參見：https://developer.mozilla.org/zh-CN/docs/Web/API/FormDataui

原生的XMLHttpRequest 實現

前端的代碼:

&lt;form&gt;
  &lt;input type="file" name="pic" id="pic"/&gt;
  &lt;input type="button" onClick="upload()" value="上傳" /&gt;
&lt;/form&gt;

js的代碼:

function upload(){
    // 請求的後端方法
    var url="upload";
    // 獲取文件
    var pic = document.getElementById('pic').files[0];

    // 初始化一個 XMLHttpRequest 對象
    var xhr = new XMLHttpRequest();
    // 初始化一個 FormData 對象
    var form = new FormData();

    // 攜帶文件
    form.append("pic", pic);
    //開始上傳
    xhr.open("POST", url, true);
    //在readystatechange事件上綁定一個事件處理函數
    xhr.onreadystatechange=callback;
    xhr.send(form);

    function callback() {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                if(xhr.responseText == 1){
                    alert('添加成功');
                    window.location.reload();
                }else{
                   alert("添加失敗");
               }
            }
        }
   }
}

參見:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

後端代碼：
如方法一，不變。

JQuery + FormData 實現

其實JQuery也是能夠操做的，不過老版本不支持，因此建議使用2.0及更新版本。

前端代碼:

&lt;form id= "upload_form"&gt;  
  指定文件名：&lt;input type="text" name="filename" /&gt;
  上傳文件：&lt;input type="file" name="file"/&gt;
  &lt;input type="button" value="上傳" onclick="upload()" /&gt;  
&lt;/form&gt;

js代碼：

function upload(){  
    var form = new FormData($("#upload_form")[0]);  
    $.ajax({  
      url:'upload',  
      type:'POST',  
      data:form,  
      success:function (result){  
        alert(result);  
      },  
      error:function (result){  
        alert(result);  
      }  
   });  
}

後端代碼：
如方法一，不變。

無刷新的上傳圖片功能，也輕鬆的搞定了！