近期有一些朋友，在做上傳圖片這一塊的時(shí)候進(jìn)度卡住了。有個(gè)朋友說(shuō)，我已經(jīng)在這個(gè)問(wèn)題上浪費(fèi)了一天了。
確實(shí)，對(duì)于新手而言，上傳圖片成了比較復(fù)雜的的一個(gè)事，今天整理了一下常用的兩種方式，讓新手輕松掌握上傳圖片的小難題。

（一）form表單上傳

這種方式簡(jiǎn)單暴力，如果沒有特殊需求，數(shù)據(jù)和圖片一次性處理的時(shí)候，這種方式，最合適不過(guò)。

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

<form action="upload" method="post" enctype="multipart/form-data">
  <input type="file" name="pic" />
  <input type="submit" value="上傳" />
</form>

• action 請(qǐng)求的后端方法
• enctype="multipart/form-data" 在使用包含文件上傳控件的表單時(shí)，必須使用該值。

<b>后端的代碼:</b>

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

    if($pic){
        // 上傳的路徑，建議寫物理路徑
        $uploadDir = 'static/upload'; 
        // 創(chuàng)建文件夾  
        if(!file_exists($uploadDir)){        
            mkdir($uploadDir, 0777);    
        }    
        // 用時(shí)間戳來(lái)保存圖片，防止重復(fù)
        $targetFile = $uploadDir . '/' . time() . $_FILES['pic']['name'];    
        // 將臨時(shí)文件 移動(dòng)到我們指定的路徑，返回上傳結(jié)果
        $upload_ret = move_uploaded_file($pic, $targetFile) ? true : false;
    }

    return $upload_ret;
}

簡(jiǎn)單的一個(gè)form表單上傳文件就搞定了！

（二）ajax 無(wú)刷新上傳圖片

傳統(tǒng)的form表單提交會(huì)導(dǎo)致頁(yè)面刷新，但是在有些情況下，我們不希望頁(yè)面被刷新，這種時(shí)候我們都是使用ajax的方式進(jìn)行請(qǐng)求的。

很多人肯定會(huì)想到JQuery的ajax操作，但是這樣的做法是沒用的，因?yàn)橹荒軅鬟f一般的參數(shù)，文件是無(wú)法上傳的。
這個(gè)時(shí)候 有一個(gè)叫做FormData的東西的出現(xiàn)拯救了我們

關(guān)于FormData

XMLHttpRequest Level 2添加了一個(gè)新的接口FormData，利用FormData對(duì)象，我們可以通過(guò)JavaScript用一些鍵值對(duì)來(lái)模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來(lái)異步的提交這個(gè)"表單"。比起普通的ajax，使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。
所有主流瀏覽器的較新版本都已經(jīng)支持這個(gè)對(duì)象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

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

• 原生的XMLHttpRequest 實(shí)現(xiàn)

前端的代碼:

<form>
  <input type="file" name="pic" id="pic"/>
  <input type="button" onClick="upload()" value="上傳" />
</form>    

js的代碼:

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

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

    // 攜帶文件
    form.append("pic", pic);
    //開始上傳
    xhr.open("POST", url, true);
    //在readystatechange事件上綁定一個(gè)事件處理函數(shù)
    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 實(shí)現(xiàn)

其實(shí)JQuery也是可以操作的，不過(guò)老版本不支持，所以建議使用2.0及更新版本。

前端代碼:

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

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);  
      }  
   });  
}  

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

無(wú)刷新的上傳圖片功能，也輕松的搞定了！

總結(jié)

一般根據(jù)業(yè)務(wù)選擇對(duì)應(yīng)的方式來(lái)實(shí)現(xiàn)，文章里面主要是告訴大家如何實(shí)現(xiàn)，一些細(xì)節(jié)處理，還是需要大家自己去處理。
如有疑問(wèn)或者建議，都可以聯(lián)系我。