第php+WebUploader實(shí)現(xiàn)圖片批量上傳功能webuploader主要用來(lái)做文件的上傳，支持批量上傳和圖片預(yù)覽，圖片預(yù)覽是將圖片生成base64數(shù)據(jù)直接在標(biāo)簽中使用，所以能夠達(dá)到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以上webuploader的官方網(wǎng)址看，我一直認(rèn)為，看官網(wǎng)文檔是學(xué)習(xí)最直接的途徑。webuploader官方網(wǎng)站，順帶一提，webuploader是由BaiduFexTeam團(tuán)隊(duì)進(jìn)行維護(hù)的。

二.webuploader上傳原理

1.PHP+HTML表單上傳文件

在講這個(gè)之前，需要先了解一下php的文件上傳方式，上傳分兩個(gè)部分

先通過(guò)html創(chuàng)建表單，在表單中添加

inputtype='file'name='xxx'

的文件上傳標(biāo)簽，點(diǎn)擊上傳的submit按鈕之后，就可以將文件上傳到服務(wù)器了。

2.到了服務(wù)器端，接收到的上傳文件會(huì)被存儲(chǔ)在php指定的臨時(shí)文件夾中，利用PHP的內(nèi)置函數(shù)move_uploaded_file()，就可以將臨時(shí)文件移動(dòng)到你想要的目標(biāo)文件夾中，這個(gè)過(guò)程可以對(duì)文件進(jìn)行改名、做大小判斷是否符合條件等，這樣上傳就完成了。

完整的php表單上傳案例，可以看w3school的這篇文章，這里就不累贅了。PHP+HTML表單上傳文件

2.webuploader上傳原理

使用php+html表單上傳可以完成文件的上傳工作，但是有缺點(diǎn)，

上傳文件時(shí)必須提交整個(gè)頁(yè)面，這樣頁(yè)面會(huì)被刷新

上傳圖片是沒(méi)辦法進(jìn)行圖片預(yù)覽，所以有時(shí)候上傳錯(cuò)了圖片也要等到圖片真正上傳上去之后刷新了頁(yè)面才知道。

webuploader解決了這兩個(gè)問(wèn)題，webuploader使用ajax技術(shù)提交表單，上傳的時(shí)候不需要提交頁(yè)面，可以利用事件監(jiān)聽(tīng)機(jī)制監(jiān)聽(tīng)上傳的結(jié)果，在頁(yè)面中做出反饋，而且還能做圖片預(yù)覽。使用webuploader上傳圖片，也只需要幾步：

前臺(tái)HTML頁(yè)面配置webuploader

后臺(tái)服務(wù)器PHP頁(yè)面接受webuploader的上傳圖片，然后進(jìn)行處理。

后臺(tái)處理完圖片返回json數(shù)據(jù)的結(jié)果給前臺(tái)

前臺(tái)接收后作出反饋。

這里說(shuō)一點(diǎn)，后臺(tái)PHP接收和處理圖片其實(shí)和PHP+HTML表單上傳基本是一樣的。

三.webuploader的配置和使用

所有的配置參數(shù)和使用方法都可以查看官方文件。webuploader官方網(wǎng)站，在webuploadergithub倉(cāng)庫(kù)中有一些example案例可以參考。example

我的運(yùn)行環(huán)境：php5.6+nginx+macOS

我的文件夾的目錄

index.php

upload_img.php

mywebupload.js

webuploader/

uploads/

1.前臺(tái)HTML頁(yè)面配置webupload

主要做以下幾個(gè)步驟：

引入webuploader的相關(guān)js和css包

創(chuàng)建HTML標(biāo)簽

創(chuàng)建一個(gè)js文件，初始化webuploader以下是整個(gè)頁(yè)面代碼，webuploader文件夾是在github上整個(gè)搬運(yùn)下來(lái)的，然后我還用到了jquery來(lái)增強(qiáng)頁(yè)面的體驗(yàn)。

index.html

!doctypehtml

htmllang="cn"

head

metacharset="UTF-8"

metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"

titleWebUploader演示/title

linkrel="stylesheet"type="text/css"href="webuploader/css/webuploader.css"/

linkrel="stylesheet"type="text/css"href="/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/

linkrel="shortcuticon"href="favicon.ico"

/head

body

divid="imgPicker"選擇文件/div

button上傳/button

div/div

div/div

!--jquery1.12--

scriptsrc="/npm/jquery@1.12.4/dist/jquery.min.js"/script

!--bootstrap核心js文件--

scriptsrc="/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"/script

!--webuploaderjs--

!--scripttype="text/javascript"src="static/jquery.js"/script--

scripttype="text/javascript"src="webuploader/dist/webuploader.min.js"/script

scripttype="text/javascript"src="mywebupload.js"/script

/body

/html

mywebupload.js

$(function(){

*配置webuploader

varimgUploader=WebUploader.create({

fileVal:'img',//相當(dāng)于input標(biāo)簽的name屬性，用于后臺(tái)PHP識(shí)別接收上傳文件的field

swf:'./webuploader/dist/Uploader.swf',//swf文件路徑

server:'./upload_img.php',//文件接收服務(wù)端。

fileNumLimit:10,//上傳文件的限制

pick:{

id:'#imgPicker',//

multiple:true//是否支持多文件上傳

//只允許上傳圖片

accept:{

title:'OnlyImages',

extensions:'gif,jpg,jpeg,bmp,png',

mimeTypes:'image/jpg,image/jpeg,image/png,image/gif,image/bmp'

auto:false,//添加文件后是否自動(dòng)上傳上去，我設(shè)置了false，后面我會(huì)利用自己的上傳按鈕上傳

resize:false//不壓縮image,默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！

*設(shè)置上傳按鈕的單擊事件

$('.btn-upload').click(function(){

imgUploader.upload();//webuploader內(nèi)置的upload函數(shù)，啟動(dòng)webuploader的上傳

*配置webuploader的事件監(jiān)聽(tīng)

//當(dāng)圖片文件被添加到上傳隊(duì)列中

imgUploader.on('fileQueued',function(file){

addImgThumb(file);

//生產(chǎn)圖片預(yù)覽

functionaddImgThumb(file){

imgUploader.makeThumb(file,function(error,ret){

if(!error){

img='imgalt=""src="'+ret+'"/

$('.img-thumb').append(img);

}else{

console.log('makingimgerror');

},1,1);

imgUploader.on('uploadSuccess'),function(file,response){

//response是后臺(tái)upload_img.php返回的數(shù)據(jù)

if(response.success){

$('.result').append('p'++'上傳成功/p')

}else{

$('.result').append('p'+response.message+'/p')

})

2.后臺(tái)PHP頁(yè)面處理上傳文件

這里要注意幾點(diǎn)：

1后臺(tái)處理的php文件文件名必須跟webuploader配置的時(shí)候一樣。

2上傳的文件夾記得設(shè)置好權(quán)限，linux可以利用chmod來(lái)修改文件夾權(quán)限，否則會(huì)導(dǎo)致上傳失敗。

我這里的處理方式比較簡(jiǎn)單，有什么問(wèn)題可以給我留言。

upload_img.php

$field='img';//對(duì)應(yīng)webupload里設(shè)置的fileVal

$savePath='./uploads/';//這里注意設(shè)置uploads文件夾的權(quán)限

$saveName=time().uniqid().'_'.$_FILES[$field]['name'];//為文件重命名

$fullName=$savePath.$saveName;

if(file_exists($fullName)){

$result=[

'success'=false,

'message'='相同文件名的文件已經(jīng)存在'

}else{

move_uploaded_file($_FILES[$field]["tmp_name"],$fullName);

$result=['success'