近期有一些朋友，在做上傳圖片這一塊的時候進度卡住了雇庙。有個朋友說，我已經(jīng)在這個問題上浪費了一天了悍赢。
確實援制，對于新手而言戏挡，上傳圖片成了比較復(fù)雜的的一個事，今天整理了一下常用的兩種方式晨仑，讓新手輕松掌握上傳圖片的小難題褐墅。
（一）form表單上傳
這種方式簡單暴力，如果沒有特殊需求洪己，數(shù)據(jù)和圖片一次性處理的時候妥凳，這種方式，最合適不過答捕。
<b>前端的代碼:</b>
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<input type="submit" value="上傳" />
</form>
- action 請求的后端方法
- enctype="multipart/form-data" 在使用包含文件上傳控件的表單時逝钥，必須使用該值。
<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);
}
// 用時間戳來保存圖片艘款，防止重復(fù)
$targetFile = $uploadDir . '/' . time() . $_FILES['pic']['name'];
// 將臨時文件 移動到我們指定的路徑，返回上傳結(jié)果
$upload_ret = move_uploaded_file($pic, $targetFile) ? true : false;
}
return $upload_ret;
}
簡單的一個form表單上傳文件就搞定了痢站！
（二）ajax 無刷新上傳圖片
傳統(tǒng)的form表單提交會導(dǎo)致頁面刷新磷箕，但是在有些情況下，我們不希望頁面被刷新阵难，這種時候我們都是使用ajax的方式進行請求的岳枷。
很多人肯定會想到JQuery的ajax操作，但是這樣的做法是沒用的，因為只能傳遞一般的參數(shù)空繁，文件是無法上傳的殿衰。
這個時候 有一個叫做FormData的東西的出現(xiàn)拯救了我們
關(guān)于FormData
XMLHttpRequest Level 2添加了一個新的接口FormData，利用FormData對象盛泡，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件闷祥，我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單"。比起普通的ajax傲诵，使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件凯砍。
所有主流瀏覽器的較新版本都已經(jīng)支持這個對象了，比如Chrome 7+拴竹、Firefox 4+悟衩、IE 10+、Opera 12+栓拜、Safari 5+座泳。
參見：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
-
原生的XMLHttpRequest 實現(xiàn)
前端的代碼:
<form>
<input type="file" name="pic" id="pic"/>
<input type="button" onClick="upload()" value="上傳" />
</form>
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事件上綁定一個事件處理函數(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 實現(xiàn)
其實JQuery也是可以操作的挑势，不過老版本不支持，所以建議使用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);
}
});
}
后端代碼：
如方法一潮饱，不變。
無刷新的上傳圖片功能赏陵，也輕松的搞定了饼齿！
總結(jié)
一般根據(jù)業(yè)務(wù)選擇對應(yīng)的方式來實現(xiàn)，文章里面主要是告訴大家如何實現(xiàn)蝙搔，一些細節(jié)處理缕溉，還是需要大家自己去處理。
如有疑問或者建議吃型，都可以聯(lián)系我证鸥。
