一.webuploader
webuploader主要用來做文件的上傳，支持批量上傳和圖片預(yù)覽，圖片預(yù)覽是將圖片生成base64數(shù)據(jù)直接在標簽中使用，所以能夠達到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以上webuploader的官方網(wǎng)址看，我一直認為，看官網(wǎng)文檔是學(xué)習最直接的途徑。 webuploader官方網(wǎng)站，順帶一提，webuploader是由Baidu Fex Team團隊進行維護的。
二. webuploader上傳原理
1. PHP+HTML表單上傳文件
在講這個之前，需要先了解一下php的文件上傳方式，上傳分兩個部分
先通過html創(chuàng)建表單，在表單中添加
<input type='file' name='xxx'>
的文件上傳標簽，點擊上傳的submit 按鈕之后，就可以將文件上傳到服務(wù)器了。
2. 到了服務(wù)器端，接收到的上傳文件會被存儲在php指定的臨時文件夾中，利用PHP的內(nèi)置函數(shù)move_uploaded_file()，就可以將臨時文件移動到你想要的目標文件夾中，這個過程可以對文件進行改名、做大小判斷是否符合條件等，這樣上傳就完成了。
完整的php表單上傳案例，可以看w3school的這篇文章，這里就不累贅了。PHP+HTML表單上傳文件
2. webuploader上傳原理
使用php+html表單上傳可以完成文件的上傳工作，但是有缺點，
webuploader解決了這兩個問題，webuploader使用ajax技術(shù)提交表單，上傳的時候不需要提交頁面，可以利用事件監(jiān)聽機制監(jiān)聽上傳的結(jié)果，在頁面中做出反饋，而且還能做圖片預(yù)覽。使用webuploader上傳圖片，也只需要幾步：
這里說一點，后臺PHP接收和處理圖片其實和PHP+HTML表單上傳基本是一樣的。
三. webuploader的配置和使用
所有的配置參數(shù)和使用方法都可以查看官方文件。webuploader官方網(wǎng)站，在webuploader github倉庫中有一些example案例可以參考。example
我的運行環(huán)境：php5.6+nginx+macOS
我的文件夾的目錄
1. 前臺HTML頁面配置webupload
主要做以下幾個步驟：
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" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.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', // 文件接收服務(wù)端。 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, // 添加文件后是否自動上傳上去，我設(shè)置了false，后面我會利用自己的上傳按鈕上傳 resize: false // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！ }); /* * 設(shè)置上傳按鈕的單擊事件 */ $('.btn-upload').click(function(){ imgUploader.upload(); // webuploader內(nèi)置的upload函數(shù)，啟動webuploader的上傳 }); /* * 配置webuploader的事件監(jiān)聽 */ // 當圖片文件被添加到上傳隊列中 imgUploader.on('fileQueued', function (file) { addImgThumb(file); }); // 生產(chǎn)圖片預(yù)覽 function addImgThumb(file){ imgUploader.makeThumb(file, function(error, ret){ if(!error){ img = '<img $('.img-thumb').append(img); }else{ console.log('making img error'); } },1,1); } imgUploader.on('uploadSuccess'), function(file, response){ // response 是后臺upload_img.php返回的數(shù)據(jù) if(response.success){ $('.result').append('<p>' + file.name + '上傳成功</p>') }else{ $('.result').append('<p>' + response.message + '</p>') } });})2. 后臺PHP頁面處理上傳文件
這里要注意幾點：
1 后臺處理的php文件文件名必須跟webuploader配置的時候一樣。
2 上傳的文件夾記得設(shè)置好權(quán)限，linux可以利用chmod來修改文件夾權(quán)限，否則會導(dǎo)致上傳失敗。
我這里的處理方式比較簡單，有什么問題可以給我留言。
upload_img.php
<?php $field = 'img'; // 對應(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'=>true, 'fullName'=>$fullName]; } return json_encode($result); // 將結(jié)果打包成json格式返回?>以上就是webuploader的全部內(nèi)容，更多webuploader的參數(shù)配置和事件可以參考webuploader的官方網(wǎng)址。希望大家多多留言交流指正。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，謝謝大家對VeVb武林網(wǎng)的支持。
新聞熱點
疑難解答
圖片精選
