php+WebUploader圖片批次上傳
一.webuploader
webuploader主要用來做檔案的上傳，支援批次上傳和圖片預覽，圖片預覽是將圖片產生base64資料直接在標籤中使用，所以能夠達到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以到webuploader的官方網址看，我一直認為，看官網文件是學習最直接的途徑。 webuploader官方網站，順帶一提，webuploader是由Baidu Fex Team團隊進行維護的。
二.webuploader 上傳原理
1. PHP HTML表單上傳檔案
在講這個之前，需要先了解一下php的檔案上傳方式，上傳分成兩個部分
先透過html建立
<form>表單，在表單中加入
<input type='file' name='xxx'>
的檔案上傳標籤，點擊上傳的submit 按鈕之後，就可以將檔案上傳到伺服器了。
到了伺服器端，接收的上傳檔案會被儲存在php指定的暫存資料夾中，利用PHP的內建函數
move_uploaded_file()，就可以將臨時檔案移到你想要的目標資料夾中，這個過程可以對檔案進行改名、做大小判斷是否符合條件等，這樣上傳就完成了。
完整的php表單上傳案例，可以看w3school的這篇文章，這裡就不累贅了。 PHP HTML表單上傳檔案
2. webuploader上傳原則
使用php html表單上傳可以完成檔案的上傳工作，但有缺點，
#上傳檔案時必須提交整個頁面，這樣頁面會被刷新
#上傳圖片是沒辦法進行圖片預覽，所以有時候上傳錯了圖片也要等到圖片真正上傳上去之後刷新了頁面才知道。
webuploader解決了這兩個問題，webuploader使用ajax技術提交表單，上傳的時候不需要提交頁面，可以利用事件監聽機制監聽上傳的結果，在頁面中做出回饋，而且還能做圖片預覽。使用webuploader上傳圖片，也只需要幾步：
前台HTML頁面設定webuploader
後台伺服器PHP頁面接受webuploader的上傳圖片，然後進行處理。
後台處理完圖片返回json資料的結果給前台
前台接收json資料後作出回饋。
這裡說一點，後台PHP接收和處理圖片其實和PHP HTML表單上傳基本上是一樣的。
三. webuploader的設定和使用
所有的設定參數和使用方法都可以查看官方檔案。 webuploader官方網站，在webuploader github倉庫中有一些example案例可以參考。 example
我的運行環境：php5.6 nginx macOS
我的資料夾的目錄
index.php
upload_img.php
mywebupload.js
webuploader/
- 1. 前台HTML頁面設定webupload
主要做以下步驟：
- index.html
- mywebupload.js
2. 後台PHP頁處理上傳檔案
$(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>') } }); })登入後複製
<!doctype html> <html> <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></div> <div></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>
<?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格式返回
?>更多PHP相關技術文章，請造訪PHP教學欄位學習！
以上是php+WebUploader圖片批次上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南
Dec 24, 2024 pm 04:42 PM
PHP 8.4 帶來了多項新功能、安全性改進和效能改進，同時棄用和刪除了大量功能。 本指南介紹如何在 Ubuntu、Debian 或其衍生版本上安裝 PHP 8.4 或升級到 PHP 8.4
如何設定 Visual Studio Code (VS Code) 進行 PHP 開發
Dec 20, 2024 am 11:31 AM
Visual Studio Code，也稱為 VS Code，是一個免費的原始碼編輯器 - 或整合開發環境 (IDE) - 可用於所有主要作業系統。 VS Code 擁有大量針對多種程式語言的擴展，可以輕鬆編寫
在PHP API中說明JSON Web令牌（JWT）及其用例。
Apr 05, 2025 am 12:04 AM
JWT是一種基於JSON的開放標準，用於在各方之間安全地傳輸信息，主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時，可以生成和驗證JWT，並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大，調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、
php程序在字符串中計數元音
Feb 07, 2025 pm 12:12 PM
字符串是由字符組成的序列，包括字母、數字和符號。本教程將學習如何使用不同的方法在PHP中計算給定字符串中元音的數量。英語中的元音是a、e、i、o、u，它們可以是大寫或小寫。 什麼是元音？ 元音是代表特定語音的字母字符。英語中共有五個元音，包括大寫和小寫： a, e, i, o, u 示例 1 輸入：字符串 = "Tutorialspoint" 輸出：6 解釋 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。總共有 6 個元
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
解釋PHP中的晚期靜態綁定（靜態：:)。
Apr 03, 2025 am 12:04 AM
靜態綁定（static::）在PHP中實現晚期靜態綁定（LSB），允許在靜態上下文中引用調用類而非定義類。 1）解析過程在運行時進行，2）在繼承關係中向上查找調用類，3）可能帶來性能開銷。
什麼是PHP魔術方法（__ -construct，__destruct，__call，__get，__ set等）並提供用例？
Apr 03, 2025 am 12:03 AM
PHP的魔法方法有哪些？ PHP的魔法方法包括：1.\_\_construct，用於初始化對象；2.\_\_destruct，用於清理資源；3.\_\_call，處理不存在的方法調用；4.\_\_get，實現動態屬性訪問；5.\_\_set，實現動態屬性設置。這些方法在特定情況下自動調用，提升代碼的靈活性和效率。
PHP和Python：比較兩種流行的編程語言
Apr 14, 2025 am 12:13 AM
PHP和Python各有優勢，選擇依據項目需求。 1.PHP適合web開發，尤其快速開發和維護網站。 2.Python適用於數據科學、機器學習和人工智能，語法簡潔，適合初學者。
