php+WebUploader image batch upload-PHP Tutorial-php.cn

php+WebUploader image batch upload

1.webuploader

webuploader is mainly used to upload files and supports batch uploads and image previews. Preview is to generate base64 data from the image and use it directly in the php+WebUploader image batch upload tag, so the effect that can be achieved is that you can see the effect of uploading the image before actually uploading it. For more detailed introduction, you can go to the official website of webuploader. I always believe that reading the official website documents is the most direct way to learn. webuploader official website, by the way, webuploader is maintained by the Baidu Fex Team team.

2. Webuploader upload principle

1. PHP HTML form upload file

Before talking about this, you need to understand the file upload method of PHP. The upload is divided into two parts.

First create the <form> form through html, and add the file upload tag of

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

Copy after login

in the form, After clicking the upload submit button, you can upload the file to the server.

At the server side, the received uploaded file will be stored in the temporary folder specified by PHP. Use PHP's built-in function move_uploaded_file(). Move the temporary file to the target folder you want. This process can rename the file, size it to determine whether it meets the conditions, etc. Then the upload is complete.

For a complete PHP form upload case, you can read this article by w3school, so I won’t go into details here. PHP HTML form upload file

2. Webuploader upload principle

Using PHP HTML form upload can complete the file uploading work, but it has shortcomings,

When uploading a file, you must submit the entire page, so that the page will be refreshed
There is no way to preview the image when uploading it, so sometimes you have to wait until the wrong image is uploaded You won’t know until you refresh the page after the picture is actually uploaded.

webuploader solves these two problems. Webuploader uses ajax technology to submit the form. There is no need to submit the page when uploading. You can use the event listening mechanism to monitor the upload results and make decisions on the page. feedback, and can also do picture preview. Using webuploader to upload images only requires a few steps:

The front-end HTML page configures webuploader
The background server PHP page accepts images uploaded by webuploader. Then process it.
After processing the image in the background, the result of returning json data is sent to the front desk.
The front desk receives the json data and gives feedback.

Let me talk about it here. The background PHP receiving and processing images is basically the same as PHP HTML form upload.

3. Configuration and use of webuploader

You can view the official documents for all configuration parameters and usage methods. webuploader official website, there are some example cases in the webuploader github warehouse for reference. example

My running environment: php5.6 nginx macOS

The directory of my folder

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

1. Front-end HTML page configuration webupload

Mainly do the following steps:

Introduce the relevant js and css packages of webuploader
Create HTML tags
Create a js file and initialize webuploader. The following is the entire page code, The webuploader folder was moved entirely from github, and then I used jquery to enhance the page experience.

index.html

<!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>

Copy after login

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>')
        }
    });
})

Copy after login

2. The background PHP page processes uploaded files

There are two things to note here Point:

The file name of the php file processed in the background must be the same as when the webuploader is configured.
Remember to set the permissions of the uploaded folder. Linux can use chmod to modify the folder permissions, otherwise the upload will fail.

My handling method here is relatively simple. If you have any questions, please leave me a message.

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格式返回
?>

Copy after login

The above is the entire content of webuploader. For more parameter configurations and events of webuploader, please refer to the official website of webuploader. I hope everyone will leave more messages to exchange comments and corrections.

For more PHP related technical articles, please visit the PHP Tutorial column to learn!

The above is the detailed content of php+WebUploader image batch upload. For more information, please follow other related articles on the PHP Chinese website!