使用web uploader的demo怎样导入文件

Posted 2023-04-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用web uploader的demo怎样导入文件相关的知识，希望对你有一定的参考价值。

参考技术A 要解决302问题也很简单，就是html5的文件上传，正好最近在ueditor里看到百度的webuploader，会自动选择flash html5，就是一个成熟的解决方案了。

先看前端，我们将最常用的操作封装为插件，asp.net中和MVC中最好使用相对于应用程序的绝对路径，自行定义全局 applicationPath ：var applicationPath = "@(Href("~")=="/"?"":Href("~"))";

web uploader的使用

1.引入文件需要引入js、css、swf文件

<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>
    <!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list" style="width: 100%;height: 200px"></div>
    <div id="filePicker">选择图片</div>
    <input id="start" type="submit" value="开始上传">
</div>
</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‘);
    }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.上传文件类

<?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 ([email protected]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);

以上是关于使用web uploader的demo怎样导入文件的主要内容，如果未能解决你的问题，请参考以下文章

web uploader的demo怎样导入css文件

Express web框架 upload file