Пакетная загрузка изображений с помощью php+WebUploader

PHP

1. веб-загрузчик

webuploader в основном используется для загрузки файлов, поддерживает пакетную загрузку и предварительный просмотр изображений, предварительный просмотр изображений предназначен для создания данных base64 из изображений непосредственно вОн используется в теге, поэтому эффект, которого можно достичь, заключается в том, что вы можете увидеть эффект загрузки без фактической загрузки изображения. Для более подробного ознакомления вы можете перейти на официальный сайт webuploader, Я всегда думаю, что чтение официальной документации сайта — это самый прямой способ узнать.официальный сайт webuploader, кстати, webuploader поддерживается командой Baidu Fex.

2. Принцип загрузки Webuploader

1. Файл загрузки формы PHP+HTML

Прежде чем говорить об этом, вам нужно понять метод загрузки файлов в php.Загрузка разделена на две части.

  1. Сначала создайте через html<form>форма, добавить в форму
<input type='file' name='xxx'>

Вкладка загрузки файла, нажмите кнопку отправки отправки, вы можете загрузить файл на сервер.

  1. На стороне сервера полученные загруженные файлы будут храниться во временной папке, указанной php, с помощью встроенных функций PHPmove_uploaded_file(), вы можете переместить временный файл в нужную целевую папку.В этом процессе вы можете переименовать файл, определить, соответствует ли размер условиям и т. д., и загрузка будет завершена.

Для полного случая загрузки формы php вы можете прочитать эту статью w3school, поэтому я не буду повторяться здесь.Файл загрузки формы PHP+HTML

2. Принцип загрузки Webuploader

Использование загрузки формы php+html может завершить загрузку файлов, но есть недостатки,

  1. Вся страница должна быть представлена ​​при загрузке файла, поэтому страница будет обновлена
  2. Нет возможности предварительно просмотреть изображение при загрузке изображения, поэтому иногда, если вы загрузите неправильное изображение, вы не узнаете об этом, пока не обновите страницу после фактической загрузки изображения.

Webuploader решает эти две проблемы. Webuploader использует технологию ajax для отправки форм. Ему не нужно отправлять страницы при загрузке. Он может использовать механизм мониторинга событий для отслеживания результатов загрузки, создания обратной связи на странице, а также для предварительного просмотра изображений. Для загрузки изображений с помощью webuploader требуется всего несколько шагов:

  1. Веб-загрузчик конфигурации передней HTML-страницы
  2. Страница PHP фонового сервера принимает загруженное изображение из веб-загрузчика, а затем обрабатывает его.
  3. После обработки изображения в фоновом режиме верните результат данных json на передний план
  4. Стойка регистрации делает обратную связь после получения данных json.

Вот точка, фоновый PHP, получающий и обрабатывающий изображения, в основном такой же, как загрузка формы PHP+HTML.

3. Настройка и использование webuploader

Все параметры конфигурации и способы использования можно посмотреть в официальных документах.официальный сайт webuploader, в репозитории github webuploader есть несколько примеров для справки.example

Моя операционная среда: php5.6+nginx+macOS

каталог моей папки

  • index.php
  • upload_img.php
  • mywebupload.js
  • webuploader/
  • uploads/

1. Настройте веб-загрузку на главной HTML-странице.

В основном выполните следующие шаги:

  1. Введите связанные пакеты JS и CSS Webuploader
  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. Я надеюсь, что вы оставите много комментариев и обменяетесь исправлениями.

Если статья была вам полезна, ставьте лайк и делитесь со мной.

Категории