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



				


				
时间： 2024-10-02 11:44:02 

		


		


	

	
	

		


		
web uploader的使用的相关文章


						

		

			

                了解Web Uploader
			

		

		

									

				1.简介WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用.采用大文件分片并发上传,极大的提高了文件上传效率. a.分片.并发分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传			

		

	

				

		

			

                使用Web Uploader实现多文件上传
			

		

		

									

				引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu			

		

	

				

		

			

                Web Uploader文件上传
			

		

		

									

				引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu			

		

	

				

		

			

                百度上传插件Web Uploader
			

		

		

									

				WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,			

		

	

				

		

			

                Web Uploader - 功能齐全，完美兼容 IE 的上传组件
			

		

		

									

				文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题. WebUploader 是由 Baidu FEX 团队开发的一款以 HTML5 为主,FLASH 为辅的现代文件上传组件.在现代的浏览器里面能充分发挥 HTML5 的优势,同时又不摒弃主流IE浏览器,沿用原来的 FLASH 运行时,兼容 IE6+,iOS 6+, android 4+.采用大文件分片并发上传,极大的提高了文件上传效率. 源码下载      在线演示 特性 分			

		

	

				

		

			

                Web Uploader在低版本IE下无法显示Flash的一种情况
			

		

		

									

				用户反馈在IE 8下无法正常显示Web Uploader控件,并已安装了Flash插件.调试发现在内部抛出了Runtime Error的错误,关键代码如下: Runtime.create = function( opts, orders ) { var type, runtime; orders = orders || Runtime.orders; $.each( orders.split( /\s*,\s*/g ), function() { if ( factories[ this ] )			

		

	

				

		

			

                Web Uploader文件上传插件
			

		

		

									

				http://www.jq22.com/jquery-info2665 插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 分片.并发 分片与并发结合,将一			

		

	

				

		

			

                优秀的前端上传文件插件  web uploader
			

		

		

									

				WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 具体的使用方法和插件请参考 web uploader 之官网: http://fex-team.github.io/			

		

	

				

		

			

                Web Uploader 文件上传的使用
			

		

		

									

				Web Uploader 的使用 一.引用css {{-- webuploader上传样式 --}} <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/> 二.HTML部分的编写 <div class="row cl"> <label class="form-label col-xs-4