php+WebUploader圖片批量上傳

kuroroXF發表於2019-05-05
PHPWeb

一.webuploader

webuploader主要用來做檔案的上傳，支援批量上傳和圖片預覽，圖片預覽是將圖片生成base64資料直接在php+WebUploader圖片批量上傳標籤中使用，所以能夠達到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以上webuploader的官方網址看，我一直認為，看官網文件是學習最直接的途徑。 webuploader官方網站，順帶一提，webuploader是由Baidu Fex Team團隊進行維護的。

二. webuploader上傳原理

1. PHP+HTML表單上傳檔案

在講這個之前，需要先了解一下php的檔案上傳方式，上傳分兩個部分

  1. 先通過html建立
    表單，在表單中新增
<input type='file' name='xxx'>
複製程式碼

的檔案上傳標籤，點選上傳的submit 按鈕之後，就可以將檔案上傳到伺服器了。 2. 到了伺服器端，接收到的上傳檔案會被儲存在php指定的臨時資料夾中，利用PHP的內建函式move_uploaded_file()，就可以將臨時檔案移動到你想要的目標資料夾中，這個過程可以對檔案進行改名、做大小判斷是否符合條件等，這樣上傳就完成了。

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

2. webuploader上傳原理

使用php+html表單上傳可以完成檔案的上傳工作，但是有缺點，

  1. 上傳檔案時必須提交整個頁面，這樣頁面會被重新整理
  2. 上傳圖片是沒辦法進行圖片預覽，所以有時候上傳錯了圖片也要等到圖片真正上傳上去之後重新整理了頁面才知道。

webuploader解決了這兩個問題，webuploader使用ajax技術提交表單，上傳的時候不需要提交頁面，可以利用事件監聽機制監聽上傳的結果，在頁面中做出反饋，而且還能做圖片預覽。使用webuploader上傳圖片，也只需要幾步：

  1. 前臺HTML頁面配置webuploader
  2. 後臺伺服器PHP頁面接受webuploader的上傳圖片，然後進行處理。
  3. 後臺處理完圖片返回json資料的結果給前臺
  4. 前臺接收後作出反饋。

這裡說一點，後臺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

主要做以下幾個步驟：

  1. 引入webuploader的相關js和css包
  2. 建立HTML標籤
  3. 建立一個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" 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',  // 檔案接收服務端。
        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的官方網址。希望大家多多留言交流指正。

相關文章