php + WebUploader實(shí)現(xiàn)圖片批量上傳功能

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

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

$(function(){

  /*
   *  配置webuploader
   */

  var imgUploader = WebUploader.create({
    fileVal: 'img', // 相當(dāng)于input標(biāo)簽的name屬性，用于后臺(tái)PHP識(shí)別接收上傳文件的field
    swf: './webuploader/dist/Uploader.swf', // swf文件路徑
    server: './upload_img.php', // 文件接收服務(wù)端。
    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,  // 添加文件后是否自動(dòng)上傳上去，我設(shè)置了false，后面我會(huì)利用自己的上傳按鈕上傳
    resize: false  // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！
  });
  
  /*
   *  設(shè)置上傳按鈕的單擊事件
   */
  $('.btn-upload').click(function(){
    imgUploader.upload();  // webuploader內(nèi)置的upload函數(shù)，啟動(dòng)webuploader的上傳  
  });
  
  /*
   *  配置webuploader的事件監(jiān)聽(tīng) 
   */
  
  // 當(dāng)圖片文件被添加到上傳隊(duì)列中
  imgUploader.on('fileQueued', function (file) {
    addImgThumb(file);
  });
  
  // 生產(chǎn)圖片預(yù)覽
  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 是后臺(tái)upload_img.php返回的數(shù)據(jù)
    if(response.success){
      $('.result').append('p>' + file.name + '上傳成功/p>')
    }else{
      $('.result').append('p>' + response.message + '/p>')
    }
  });
})

?php
  $field = 'img';  // 對(duì)應(yīng)webupload里設(shè)置的fileVal
  
  $savePath = './uploads/';    // 這里注意設(shè)置uploads文件夾的權(quán)限
  $saveName = time() . uniqid() . '_' . $_FILES[$field]['name']; // 為文件重命名
  $fullName = $savePath . $saveName; 
  
  if (file_exists($fullName)) {
    $result = [
      'success'=>false, 
      'message'=>'相同文件名的文件已經(jīng)存在'
    ];
  }else{
    move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
    $result = ['success'=>true, 'fullName'=>$fullName];
  }
  
  return json_encode($result); // 將結(jié)果打包成json格式返回
?>