webuploader主要用來做檔案的上傳，支援批次上傳和圖片預覽，圖片預覽是將圖片產生base64資料直接在標籤中使用，所以能夠達到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以到webuploader的官方網址看，我一直認為，看官網文件是學習最直接的途徑。webuploader官方網站，順帶一提，webuploader是由Baidu Fex Team團隊進行維護的。
在講這個之前，需要先了解一下php的檔案上傳方式，上傳分成兩個部分
先透過html建立表單，在表單中加入
的檔案上傳標籤，點擊上傳的submit 按鈕之後，就可以將檔案上傳到伺服器了。
到了伺服器端，接收的上傳檔案會被儲存在php指定的暫存資料夾中，利用PHP的內建函數move_uploaded_file()，就可以將臨時檔案移到你想要的目標資料夾中，這個過程可以對檔案進行改名、做大小判斷是否符合條件等，這樣上傳就完成了。
完整的php表單上傳案例，可以看w3school的這篇文章，這裡就不累贅了。PHP HTML表單上傳檔案
使用php html表單上傳可以完成檔案的上傳工作，但有缺點，
#上傳檔案時必須提交整個頁面，這樣頁面會被刷新
#上傳圖片是沒辦法進行圖片預覽，所以有時候上傳錯了圖片也要等到圖片真正上傳上去之後刷新了頁面才知道。
webuploader解決了這兩個問題，webuploader使用ajax技術提交表單，上傳的時候不需要提交頁面，可以利用事件監聽機制監聽上傳的結果，在頁面中做出回饋，而且還能做圖片預覽。使用webuploader上傳圖片，也只需要幾步：
前台HTML頁面設定webuploader
後台伺服器PHP頁面接受webuploader的上傳圖片，然後進行處理。
後台處理完圖片返回json資料的結果給前台
前台接收json資料後作出回饋。
這裡說一點，後台PHP接收和處理圖片其實和PHP HTML表單上傳基本上是一樣的。
所有的設定參數和使用方法都可以查看官方檔案。webuploader官方網站，在webuploader github倉庫中有一些example案例可以參考。example
我的運行環境：php5.6 nginx macOS
我的資料夾的目錄
index.php
upload_img.php
mywebupload.js
webuploader/
主要做以下步驟：
WebUploader演示 选择文件
$(function(){ /* * 配置webuploader */ var imgUploader = WebUploader.create({ fileVal: 'img', // 相当于input标签的name属性，用于后台PHP识别接收上传文件的field swf: './webuploader/dist/Uploader.swf', // swf文件路径 server: './upload_img.php', // 文件接收服务端。 fileNumLimit: 10, // 上传文件的限制 pick: { id : '#imgPicker', // multiple : true // 是否支持多文件上传 }, // 只允许上传图片 accept: { title: 'Only Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp' }, auto: false, // 添加文件后是否自动上传上去，我设置了false，后面我会利用自己的上传按钮上传 resize: false // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ }); /* * 设置上传按钮的单击事件 */ $('.btn-upload').click(function(){ imgUploader.upload(); // webuploader内置的upload函数，启动webuploader的上传 }); /* * 配置webuploader的事件监听 */ // 当图片文件被添加到上传队列中 imgUploader.on('fileQueued', function (file) { addImgThumb(file); }); // 生产图片预览 function addImgThumb(file){ imgUploader.makeThumb(file, function(error, ret){ if(!error){ img = '
'; $('.img-thumb').append(img); }else{ console.log('making img error'); } },1,1); } imgUploader.on('uploadSuccess'), function(file, response){ // response 是后台upload_img.php返回的数据 if(response.success){ $('.result').append('' + file.name + '上传成功
') }else{ $('.result').append('' + response.message + '
') } }); })
false, 'message'=>'相同文件名的文件已经存在' ]; }else{ move_uploaded_file($_FILES[$field]["tmp_name"], $fullName); $result = ['success'=>true, 'fullName'=>$fullName]; } return json_encode($result); // 将结果打包成json格式返回 ?>
更多PHP相關技術文章，請造訪PHP教學欄位學習！
以上是php+WebUploader圖片批次上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！
