php+WebUploader图片批量上传-php教程

资源魔 2020-07-09 20:35:51 37 0

一.webuploader

webuploader次要用来做文件的上传，支持批量上传以及图片预览，图片预览是将图片天生base64数据间接正在标签中应用，以是可以达到的成果是未真正上传图片能够先看到上传的成果。更多详细的引见，能够上webuploader的民间网址看，我不断以为，看官网文档是学习最间接的路子。 webuploader民间网站，顺带一提，webuploader是由Baidu Fex Team团队进行保护的。

二. webuploader上传原理

1. PHP+HTML表单上传文件

正在讲这个以前，需求先理解一下php的文件上传形式，上传分两个局部

先经过html创立<form>表单，正在表单中增加

<input type='file' name='xxx'>

的文件上传标签，点击上传的submit 按钮之后，就能够将文件上传到效劳器了。

到了效劳器端，接纳到的上传文件会被存储正在php指定的暂时文件夹中，行使PHP的内置函数move_uploaded_file()，就能够将暂时文件挪动到你想要的指标文件夹中，这个进程能够对文件进行更名、做巨细判别能否合乎前提等，这样上传就实现了。

完好的php表单上传案例，能够看w3school的这篇文章，这里就没有负担了。PHP+HTML表单上传文件

2. webuploader上传原理

应用php+html表单上传能够实现文件的上传工作，然而出缺点，

上传文件时必需提交整个页面，这样页面会被刷新
上传图片是没方法进行图片预览，以是有时分上传错了图片也要比及图片真正上传下来之后刷新了页面才晓得。

webuploader处理了这两个成绩，webuploader应用ajax技巧提交表单，上传的时分没有需求提交页面，能够行使事情监听机制监听上传的后果，正在页面中做出反馈，并且还能做图片预览。应用webuploader上传图片，也只要要几步：

前台HTML页面设置装备摆设webuploader
后盾效劳器PHP页面承受webuploader的上传图片，而后进行解决。
后盾解决完图片前往json数据的后果给前台
前台接纳json数据后作出反馈。

这里说一点，后盾PHP接纳以及解决图片其实以及PHP+HTML表单上传根本是同样的。

三. webuploader的设置装备摆设以及应用

一切的设置装备摆设参数以及应用办法均可以查看民间文件。webuploader民间网站，正在webuploader github仓库中有一些example案例能够参考。example

我的运转环境：php5.6+nginx+macOS

我的文件夹的目次

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

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的民间网址。心愿各人多多留言交流斧正。

更多PHP相干技巧文章，请拜访PHP教程栏目进行学习！

以上就是php+WebUploader图片批量上传的具体内容，更多请存眷资源魔其它相干文章！

标签： php php开发教程 php开发资料 php开发自学 WebUploader 批量上传