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的官方网址。但愿你们多多留言交流指正。

若是文章对您有用，也请帮我点赞和分享吧。