php + WebUploader实现图片批量上传功能(2)

日期：2020-05-21 栏目：程序人生浏览：次

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

转载注明出处：http://www.heiqu.com/5824.html

php + WebUploader实现图片批量上传功能(2)

相关推荐