欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年05月06日 09:44:18   作者：kuroroXF  
這篇文章主要給大家介紹了利用php + WebUploader實(shí)現(xiàn)圖片批量上傳功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用PHP具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一.webuploader

webuploader主要用來做文件的上傳，支持批量上傳和圖片預(yù)覽，圖片預(yù)覽是將圖片生成base64數(shù)據(jù)直接在標(biāo)簽中使用，所以能夠達(dá)到的效果是未真正上傳圖片可以先看到上傳的效果。更多具體的介紹，可以上webuploader的官方網(wǎng)址看，我一直認(rèn)為，看官網(wǎng)文檔是學(xué)習(xí)最直接的途徑。 webuploader官方網(wǎng)站，順帶一提，webuploader是由Baidu Fex Team團(tuán)隊(duì)進(jìn)行維護(hù)的。

二. webuploader上傳原理

1. PHP+HTML表單上傳文件

在講這個(gè)之前，需要先了解一下php的文件上傳方式，上傳分兩個(gè)部分

先通過html創(chuàng)建表單，在表單中添加

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

的文件上傳標(biāo)簽，點(diǎn)擊上傳的submit 按鈕之后，就可以將文件上傳到服務(wù)器了。

2. 到了服務(wù)器端，接收到的上傳文件會(huì)被存儲(chǔ)在php指定的臨時(shí)文件夾中，利用PHP的內(nèi)置函數(shù)move_uploaded_file()，就可以將臨時(shí)文件移動(dòng)到你想要的目標(biāo)文件夾中，這個(gè)過程可以對(duì)文件進(jìn)行改名、做大小判斷是否符合條件等，這樣上傳就完成了。

完整的php表單上傳案例，可以看w3school的這篇文章，這里就不累贅了。PHP+HTML表單上傳文件

2. webuploader上傳原理

使用php+html表單上傳可以完成文件的上傳工作，但是有缺點(diǎn)，

  • 上傳文件時(shí)必須提交整個(gè)頁(yè)面，這樣頁(yè)面會(huì)被刷新
  • 上傳圖片是沒辦法進(jìn)行圖片預(yù)覽，所以有時(shí)候上傳錯(cuò)了圖片也要等到圖片真正上傳上去之后刷新了頁(yè)面才知道。

webuploader解決了這兩個(gè)問題，webuploader使用ajax技術(shù)提交表單，上傳的時(shí)候不需要提交頁(yè)面，可以利用事件監(jiān)聽機(jī)制監(jiān)聽上傳的結(jié)果，在頁(yè)面中做出反饋，而且還能做圖片預(yù)覽。使用webuploader上傳圖片，也只需要幾步：

  • 前臺(tái)HTML頁(yè)面配置webuploader
  • 后臺(tái)服務(wù)器PHP頁(yè)面接受webuploader的上傳圖片，然后進(jìn)行處理。
  • 后臺(tái)處理完圖片返回json數(shù)據(jù)的結(jié)果給前臺(tái)
  • 前臺(tái)接收后作出反饋。

這里說一點(diǎn)，后臺(tái)PHP接收和處理圖片其實(shí)和PHP+HTML表單上傳基本是一樣的。

三. webuploader的配置和使用

所有的配置參數(shù)和使用方法都可以查看官方文件。webuploader官方網(wǎng)站，在webuploader github倉(cāng)庫(kù)中有一些example案例可以參考。example

我的運(yùn)行環(huán)境：php5.6+nginx+macOS

我的文件夾的目錄

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

1. 前臺(tái)HTML頁(yè)面配置webupload

主要做以下幾個(gè)步驟：

  • 引入webuploader的相關(guān)js和css包
  • 創(chuàng)建HTML標(biāo)簽
  • 創(chuàng)建一個(gè)js文件，初始化webuploader  以下是整個(gè)頁(yè)面代碼，webuploader文件夾是在github上整個(gè)搬運(yùn)下來的，然后我還用到了jquery來增強(qiáng)頁(yè)面的體驗(yàn)。

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"  />
  <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', // 相當(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)聽 
   */
  
  // 當(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>')
    }
  });
})

2. 后臺(tái)PHP頁(yè)面處理上傳文件

這里要注意幾點(diǎn)：

1 后臺(tái)處理的php文件文件名必須跟webuploader配置的時(shí)候一樣。

2 上傳的文件夾記得設(shè)置好權(quán)限，linux可以利用chmod來修改文件夾權(quán)限，否則會(huì)導(dǎo)致上傳失敗。

我這里的處理方式比較簡(jiǎn)單，有什么問題可以給我留言。

upload_img.php

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

以上就是webuploader的全部?jī)?nèi)容，更多webuploader的參數(shù)配置和事件可以參考webuploader的官方網(wǎng)址。希望大家多多留言交流指正。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論