php+WebUploader圖片批量上傳

時間 2019-11-16

標籤 php+webuploader php webuploader 圖片批量上傳欄目 PHP 简体版

原文原文鏈接

一.webuploader

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

二. webuploader上傳原理

1. PHP+HTML表單上傳文件

在講這個以前，須要先了解一下php的文件上傳方式，上傳分兩個部分php

先經過html建立<form>表單，在表單中添加

<input type='file' name='xxx'>
複製代碼

的文件上傳標籤，點擊上傳的submit 按鈕以後，就能夠將文件上傳到服務器了。css

到了服務器端，接收到的上傳文件會被存儲在php指定的臨時文件夾中，利用PHP的內置函數move_uploaded_file()，就能夠將臨時文件移動到你想要的目標文件夾中，這個過程能夠對文件進行更名、作大小判斷是否符合條件等，這樣上傳就完成了。

完整的php表單上傳案例，能夠看w3school的這篇文章，這裏就不累贅了。PHP+HTML表單上傳文件html

2. webuploader上傳原理

使用php+html表單上傳能夠完成文件的上傳工做，可是有缺點，java

上傳文件時必須提交整個頁面，這樣頁面會被刷新
上傳圖片是沒辦法進行圖片預覽，因此有時候上傳錯了圖片也要等到圖片真正上傳上去以後刷新了頁面才知道。

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

前臺HTML頁面配置webuploader
後臺服務器PHP頁面接受webuploader的上傳圖片，而後進行處理。
後臺處理完圖片返回json數據的結果給前臺
前臺接收json數據後做出反饋。

這裏說一點，後臺PHP接收和處理圖片其實和PHP+HTML表單上傳基本是同樣的。linux

三. webuploader的配置和使用

全部的配置參數和使用方法均可以查看官方文件。webuploader官方網站，在webuploader github倉庫中有一些example案例能夠參考。examplenginx

個人運行環境：php5.6+nginx+macOSgit

個人文件夾的目錄github

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" 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頁面處理上傳文件

這裏要注意兩點：

後臺處理的php文件文件名必須跟webuploader配置的時候同樣。
上傳的文件夾記得設置好權限，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的官方網址。但願你們多多留言交流指正。

若是文章對您有用，也請幫我點贊和分享吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。