一.webuploader
webuploader主要用來做文件的上傳，支持批量上傳和圖片預覽，圖片預覽是將圖片生成base64數據直接在標簽中使用，所以能夠達到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以上webuploader的官方網址看，我一直認為，看官網文檔是學習最直接的途徑。 webuploader官方網站，順帶一提，webuploader是由Baidu Fex Team團隊進行維護的。
二. webuploader上傳原理
1. PHP+HTML表單上傳文件
在講這個之前，需要先了解一下php的文件上傳方式，上傳分兩個部分
先通過html創建表單，在表單中添加
input type='file' name='xxx'>
的文件上傳標簽，點擊上傳的submit 按鈕之后，就可以將文件上傳到服務器了。
2. 到了服務器端，接收到的上傳文件會被存儲在php指定的臨時文件夾中，利用PHP的內置函數move_uploaded_file()，就可以將臨時文件移動到你想要的目標文件夾中，這個過程可以對文件進行改名、做大小判斷是否符合條件等，這樣上傳就完成了。
完整的php表單上傳案例，可以看w3school的這篇文章，這里就不累贅了。PHP+HTML表單上傳文件
2. webuploader上傳原理
使用php+html表單上傳可以完成文件的上傳工作，但是有缺點，
- 上傳文件時必須提交整個頁面，這樣頁面會被刷新
- 上傳圖片是沒辦法進行圖片預覽，所以有時候上傳錯了圖片也要等到圖片真正上傳上去之后刷新了頁面才知道。
webuploader解決了這兩個問題，webuploader使用ajax技術提交表單，上傳的時候不需要提交頁面，可以利用事件監聽機制監聽上傳的結果，在頁面中做出反饋，而且還能做圖片預覽。使用webuploader上傳圖片，也只需要幾步：
- 前臺HTML頁面配置webuploader
- 后臺服務器PHP頁面接受webuploader的上傳圖片，然后進行處理。
- 后臺處理完圖片返回json數據的結果給前臺
- 前臺接收后作出反饋。
這里說一點，后臺PHP接收和處理圖片其實和PHP+HTML表單上傳基本是一樣的。
三. webuploader的配置和使用
所有的配置參數和使用方法都可以查看官方文件。webuploader官方網站，在webuploader github倉庫中有一些example案例可以參考。example
我的運行環境：php5.6+nginx+macOS
我的文件夾的目錄
- index.php
- upload_img.php
- mywebupload.js
- webuploader/
- uploads/
1. 前臺HTML頁面配置webupload
主要做以下幾個步驟：
- 引入webuploader的相關js和css包
- 創建HTML標簽
- 創建一個js文件，初始化webuploader 以下是整個頁面代碼，webuploader文件夾是在github上整個搬運下來的，然后我還用到了jquery來增強頁面的體驗。
index.html
!doctype html>
html lang="cn">
head>
meta charset="UTF-8">
meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
title>WebUploader演示/title>
link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
link rel="stylesheet" type="text/css" />
link rel="shortcut icon" href="favicon.ico">
/head>
body>
div id="imgPicker">選擇文件/div>
button class="btn btn-primary btn-upload">上傳/button>
div class="img-thumb">/div>
div class="result">/div>
!--jquery 1.12-->
script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">/script>
!--bootstrap核心js文件-->
script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">/script>
!--webuploader js-->
!--script type="text/javascript" src="static/jquery.js">/script>-->
script type="text/javascript" src="webuploader/dist/webuploader.min.js">/script>
script type="text/javascript" src="mywebupload.js">/script>
/body>
/html>
mywebupload.js
$(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 alt="" src="' + ret + '" />';
$('.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('p>' + file.name + '上傳成功/p>')
}else{
$('.result').append('p>' + response.message + '/p>')
}
});
})
2. 后臺PHP頁面處理上傳文件
這里要注意幾點：
1 后臺處理的php文件文件名必須跟webuploader配置的時候一樣。
2 上傳的文件夾記得設置好權限，linux可以利用chmod來修改文件夾權限，否則會導致上傳失敗。
我這里的處理方式比較簡單，有什么問題可以給我留言。
upload_img.php
?php
$field = 'img'; // 對應webupload里設置的fileVal
$savePath = './uploads/'; // 這里注意設置uploads文件夾的權限
$saveName = time() . uniqid() . '_' . $_FILES[$field]['name']; // 為文件重命名
$fullName = $savePath . $saveName;
if (file_exists($fullName)) {
$result = [
'success'=>false,
'message'=>'相同文件名的文件已經存在'
];
}else{
move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
$result = ['success'=>true, 'fullName'=>$fullName];
}
return json_encode($result); // 將結果打包成json格式返回
?>
以上就是webuploader的全部內容，更多webuploader的參數配置和事件可以參考webuploader的官方網址。希望大家多多留言交流指正。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
您可能感興趣的文章:- 關于webuploader插件使用過程遇到的小問題
- 推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
- 百度多文件異步上傳控件webuploader基本用法解析
- 使用WebUploader實現上傳文件功能（一）
- 快速掌握jQuery插件WebUploader文件上傳
- webuploader 實現圖片批量上傳功能附實例代碼
- webuploader實現上傳圖片到服務器功能
- webuploader模態框ueditor顯示問題解決方法
- 使用WebUploader實現分片斷點上傳文件功能（二）
- webuploader分片上傳的實現代碼（前后端分離）
