web uploader的使用

時間 2019-11-10

標籤 web uploader 使用欄目 HTML 简体版

原文原文鏈接

1.引入文件須要引入js、css、swf文件javascript

<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
<script type="text/javascript" src="webuploader/webuploader.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
    <script type="text/javascript" src="webuploader/webuploader.min.js"></script>
</head>
<body>
<form action="up.php" method="post">
用戶名：<input type="text" name="username">
        <!--dom結構部分-->
    <div id="uploader-demo">
        <!--用來存放item-->
        <div id="fileList" class="uploader-list" style="width: 100%;height: 200px"></div>
        <div id="filePicker">選擇圖片</div>
        <a  href="javascript:;" id="start">開始上傳</a>
    </div>
    <input type="submit" value="提交">
</form>

</body>
<script type="text/javascript">
    var uploader = WebUploader.create({

    // 選完文件後，是否自動上傳。
    auto: false,

    // swf文件路徑
    swf: '/webuploader/Uploader.swf',

    // 文件接收服務端。
    server: 'upload.php',

    // 選擇文件的按鈕。可選。
    // 內部根據當前運行是建立，多是input元素，也多是flash.
    pick: {id:'#filePicker'},

    // 只容許選擇圖片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

var $list=$('#fileList');
var thumbnailWidth=100;
var thumbnailHeight=100;
    // 當有文件添加進來的時候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div style="display:inline-block;margin-left:10px" id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '<a id="del">刪除</a>'+
                '<span id="tip">等待上傳...</span><progress value="0" max="1"></progress>'+
            '</div>'
            ),
        $img = $li.find('img');


    // $list爲容器jQuery實例
    $list.append( $li );

    // 建立縮略圖
    // 若是爲非圖片文件，能夠不用調用此方法。
    // thumbnailWidth x thumbnailHeight 爲 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能預覽</span>');
            return;
        }

        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});
//關閉自動上傳，開啓點擊上傳 用於以後的刪除圖片
$('#start').click(function(){
    uploader.upload();
});


$list.on('click','#del',function(){
    //console.log($(this));
    var ID=$(this).parent().attr('id');//選中誰獲取誰上傳圖片的id 如：div id="WU_FILE_0"
    $(this).parent().remove();//刪除當前選中項的父節點 即刪除圖片
    var queID=uploader.getFile(ID);//隊列id
    uploader.removeFile(queID);//刪除隊列id 
});



// 文件上傳過程當中建立進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    $('#'+file.id).find('progress').val(percentage);
});
//上傳成功返回數據提示
uploader.on( 'uploadSuccess', function( file,data ) {
    $('#'+file.id).find('#del').remove();
    if(data.status==0){
        $('#'+file.id).find('#tip').text('上傳成功').css('color','green');
        $('#'+file.id).append('<input name="img_url[]" type="hidden" value="'+data.url+'">');
    }else{
        $('#'+file.id).find('#tip').text('上傳失敗').css('color','red');
        $('#'+file.id).find('progress').remove();
    }
});

uploader.on( 'uploadError', function( file ) {
    $('#'+file.id).find('#tip').text('上傳出錯').css('color','red');
});
//上傳完成後刪除進度條
uploader.on( 'uploadComplete', function( file ) {
   $('#'+file.id).find('progress').remove();
});


</script>
</html>

2.up.phpphp

<?php
print_r($_POST);//查看post的值 username、img_url

3.上傳文件類css

<?php
/** 
    file: fileupload.class.php 文件上傳類FileUpload
    本類的實例對象用於處理上傳文件，能夠上傳一個文件，也可同時處理多個文件上傳
  */
  class FileUpload { 
    private $path = "uploads";          //上傳文件保存的路徑
    private $allowtype = array('jpg','gif','png'); //設置限制上傳文件的類型
    private $maxsize = 1000000;           //限制文件上傳大小（字節）
    private $israndname = true;           //設置是否隨機重命名文件， false不隨機
   
    private $originName;              //源文件名
    private $tmpFileName;              //臨時文件名
    private $fileType;               //文件類型(文件後綴)
    private $fileSize;               //文件大小
    private $newFileName;              //新文件名
    private $errorNum = 0;             //錯誤號
    private $errorMess="";             //錯誤報告消息
   
    /**
     * 用於設置成員屬性（$path, $allowtype,$maxsize, $israndname）
     * 能夠經過連貫操做一次設置多個屬性值
     *@param  string $key  成員屬性名(不區分大小寫)
     *@param  mixed  $val  爲成員屬性設置的值
     *@return  object     返回本身對象$this，能夠用於連貫操做
     */
    function set($key, $val){
      $key = strtolower($key); 
      if( array_key_exists( $key, get_class_vars(get_class($this) ) ) ){
        $this->setOption($key, $val);
      }
      return $this;
    }
   
    /**
     * 調用該方法上傳文件
     * @param  string $fileFile  上傳文件的表單名稱 
     * @return bool        若是上傳成功返回數true 
     */
   
    function upload($fileField) {
      $return = true;
      /* 檢查文件路徑是滯合法 */
      if( !$this->checkFilePath() ) {       
        $this->errorMess = $this->getError();
        return false;
      }
      /* 將文件上傳的信息取出賦給變量 */
      $name = $_FILES[$fileField]['name'];
      $tmp_name = $_FILES[$fileField]['tmp_name'];
      $size = $_FILES[$fileField]['size'];
      $error = $_FILES[$fileField]['error'];
   
      /* 若是是多個文件上傳則$file["name"]會是一個數組 */
      if(is_Array($name)){    
        $errors=array();
        /*多個文件上傳則循環處理 ， 這個循環只有檢查上傳文件的做用，並無真正上傳 */
        for($i = 0; $i < count($name); $i++){ 
          /*設置文件信息 */
          if($this->setFiles($name[$i],$tmp_name[$i],$size[$i],$error[$i] )) {
            if(!$this->checkFileSize() || !$this->checkFileType()){
              $errors[] = $this->getError();
              $return=false; 
            }
          }else{
            $errors[] = $this->getError();
            $return=false;
          }
          /* 若是有問題，則從新初使化屬性 */
          if(!$return)          
            $this->setFiles();
        }
   
        if($return){
          /* 存放全部上傳後文件名的變量數組 */
          $fileNames = array();      
          /* 若是上傳的多個文件都是合法的，則經過銷魂循環向服務器上傳文件 */
          for($i = 0; $i < count($name); $i++){ 
            if($this->setFiles($name[$i], $tmp_name[$i], $size[$i], $error[$i] )) {
              $this->setNewFileName(); 
              if(!$this->copyFile()){
                $errors[] = $this->getError();
                $return = false;
              }
              $fileNames[] = $this->newFileName;  
            }          
          }
          $this->newFileName = $fileNames;
        }
        $this->errorMess = $errors;
        return $return;
      /*上傳單個文件處理方法*/
      } else {
        /* 設置文件信息 */
        if($this->setFiles($name,$tmp_name,$size,$error)) {
          /* 上傳以前先檢查一下大小和類型 */
          if($this->checkFileSize() && $this->checkFileType()){ 
            /* 爲上傳文件設置新文件名 */
            $this->setNewFileName(); 
            /* 上傳文件  返回0爲成功， 小於0都爲錯誤 */
            if($this->copyFile()){ 
              return true;
            }else{
              $return=false;
            }
          }else{
            $return=false;
          }
        } else {
          $return=false; 
        }
        //若是$return爲false, 則出錯，將錯誤信息保存在屬性errorMess中
        if(!$return)
          $this->errorMess=$this->getError();  
   
        return $return;
      }
    }
   
    /** 
     * 獲取上傳後的文件名稱
     * @param  void   沒有參數
     * @return string 上傳後，新文件的名稱， 若是是多文件上傳返回數組
     */
    public function getFileName(){
      return $this->path.'/'.$this->newFileName;
    }
   
    /**
     * 上傳失敗後，調用該方法則返回，上傳出錯信息
     * @param  void   沒有參數
     * @return string  返回上傳文件出錯的信息報告，若是是多文件上傳返回數組
     */
    public function getErrorMsg(){
      return $this->errorMess;
    }
   
    /* 設置上傳出錯信息 */
    private function getError() {
      $str = "上傳文件<font color='red'>{$this->originName}</font>時出錯 : ";
      switch ($this->errorNum) {
        case 4: $str .= "沒有文件被上傳"; break;
        case 3: $str .= "文件只有部分被上傳"; break;
        case 2: $str .= "上傳文件的大小超過了HTML表單中MAX_FILE_SIZE選項指定的值"; break;
        case 1: $str .= "上傳的文件超過了php.ini中upload_max_filesize選項限制的值"; break;
        case -1: $str .= "未容許類型"; break;
        case -2: $str .= "文件過大,上傳的文件不能超過{$this->maxsize}個字節"; break;
        case -3: $str .= "上傳失敗"; break;
        case -4: $str .= "創建存放上傳文件目錄失敗，請從新指定上傳目錄"; break;
        case -5: $str .= "必須指定上傳文件的路徑"; break;
        default: $str .= "未知錯誤";
      }
      return $str.'<br>';
    }
   
    /* 設置和$_FILES有關的內容 */
    private function setFiles($name="", $tmp_name="", $size=0, $error=0) {
      $this->setOption('errorNum', $error);
      if($error)
        return false;
      $this->setOption('originName', $name);
      $this->setOption('tmpFileName',$tmp_name);
      $aryStr = explode(".", $name);
      $this->setOption('fileType', strtolower($aryStr[count($aryStr)-1]));
      $this->setOption('fileSize', $size);
      return true;
    }
   
    /* 爲單個成員屬性設置值 */
    private function setOption($key, $val) {
      $this->$key = $val;
    }
   
    /* 設置上傳後的文件名稱 */
    private function setNewFileName() {
      if ($this->israndname) {
        $this->setOption('newFileName', $this->proRandName());  
      } else{ 
        $this->setOption('newFileName', $this->originName);
      } 
    }
   
    /* 檢查上傳的文件是不是合法的類型 */
    private function checkFileType() {
      if (in_array(strtolower($this->fileType), $this->allowtype)) {
        return true;
      }else {
        $this->setOption('errorNum', -1);
        return false;
      }
    }
   
    /* 檢查上傳的文件是不是容許的大小 */
    private function checkFileSize() {
      if ($this->fileSize > $this->maxsize) {
        $this->setOption('errorNum', -2);
        return false;
      }else{
        return true;
      }
    }
   
    /* 檢查是否有存放上傳文件的目錄 */
    private function checkFilePath() {
      if(empty($this->path)){
        $this->setOption('errorNum', -5);
        return false;
      }
      if (!file_exists($this->path) || !is_writable($this->path)) {
        if (!@mkdir($this->path, 0755)) {
          $this->setOption('errorNum', -4);
          return false;
        }
      }
      return true;
    }
   
    /* 設置隨機文件名 */
    private function proRandName() {    
      $fileName = date('YmdHis')."_".rand(100,999);    
      return $fileName.'.'.$this->fileType; 
    }
   
    /* 複製上傳文件到指定的位置 */
    private function copyFile() {
      if(!$this->errorNum) {
        $path = rtrim($this->path, '/').'/';
        $path .= $this->newFileName;
        if (@move_uploaded_file($this->tmpFileName, $path)) {
          return true;
        }else{
          $this->setOption('errorNum', -3);
          return false;
        }
      } else {
        return false;
      }
    }
  }


/*
$file = new FileUpload();
$file->upload('file');
echo $file->getFileName();
*/
  //開始上傳
$file = new FileUpload();
if($file->upload('file')){
  $url=$file->getFileName();
  $res=['status'=>0,'url'=>$url];
} else{
  $res=['status'=>1,'url'=>'error'];
}
echo json_encode($res);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。