搜尋

首頁 >後端開發 >php教程 >php+WebUploader圖片批次上傳

php+WebUploader圖片批次上傳

步履不停
步履不停原創
2019-06-19 10:24:553990瀏覽

php+WebUploader圖片批次上傳

一.webuploader

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

二.webuploader 上傳原理

1. PHP HTML表單上傳檔案

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

  1. 先透過html建立<form>表單，在表單中加入

<input type=&#39;file&#39; name=&#39;xxx&#39;>

的檔案上傳標籤，點擊上傳的submit 按鈕之後，就可以將檔案上傳到伺服器了。

  1. 到了伺服器端，接收的上傳檔案會被儲存在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. 前台接收json資料後作出回饋。

這裡說一點，後台PHP接收和處理圖片其實和PHP HTML表單上傳基本上是一樣的。

三. webuploader的設定和使用

所有的設定參數和使用方法都可以查看官方檔案。 webuploader官方網站，在webuploader github倉庫中有一些example案例可以參考。 example

我的運行環境：php5.6 nginx macOS

我的資料夾的目錄

  • index.php

  • upload_img.php

  • mywebupload.js

  • webuploader/

    2. uploads/

    3. 1. 前台HTML頁面設定webupload

  3. 主要做以下步驟：

##引入webuploader的相關js和css包

建立HTML標籤

建立一個js文件，初始化webuploader 以下是整個頁面程式碼， webuploader資料夾是在github上整個搬運下來的，然後我還用到了jquery來增強頁面的體驗。

  1. index.html
    2. <!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>
  2. 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="&#39; + ret + &#39;" />';
                $('.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 = &#39;img&#39;;   // 对应webupload里设置的fileVal
    
    $savePath = &#39;./uploads/&#39;;       // 这里注意设置uploads文件夹的权限
    $saveName = time() . uniqid() . &#39;_&#39; . $_FILES[$field][&#39;name&#39;]; //  为文件重命名
    $fullName = $savePath . $saveName;  
    
    if (file_exists($fullName)) {
        $result = [
            &#39;success&#39;=>false, 
            'message'=>'相同文件名的文件已经存在'
        ];
    }else{
        move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
        $result = ['success'=>true, 'fullName'=>$fullName];
    }
    
    return json_encode($result);  // 将结果打包成json格式返回
?>
###以上就是webuploader的全部內容，更多webuploader的參數配置和事件可以參考webuploader的官方網址。希望大家多多留言交流指正。 ###

更多PHP相關技術文章，請造訪PHP教學欄位學習！

以上是php+WebUploader圖片批次上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php nginx json jquery css ajax html JS 事件 github macos linux
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：PHP之內建web伺服器下一篇：PHP之內建web伺服器

相關文章

看更多