zoukankan html css js c++ java

大文件webuploader的基本使用

需要先去下载webuploader包

http://fex.baidu.com/webuploader/download.html

webuploader的简单使用

需要准备

webuploader.js  uploader.swf  jQuery

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="webuploader.js"></script>
    <style type="text/css">
      .webuploader-container {
            position: relative;
        }
        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
        }
        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            padding: 10px 15px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        .webuploader-pick-hover {
            background: #00a2d4;
        }
 
        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events:none;
        }
    </style>
</head>
<body>
    <div id="uploader" class="wu-example">
         <!--用来存放文件信息-->
         <div id="thelist" class="uploader-list"></div>
         <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
         </div>
     </div>
     <div id="fileList"></div>
     <div id="ss"></div>
</body>
</html>

script代码

<script type="text/javascript">
    jQuery(function() {
        var  uploader;
        uploader = WebUploader.create({
               resize: false, // 不压缩image     
               swf: 'uploader.swf',// swf文件路径    
               server: 'upload.php', // 文件接收服务端。 
               pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
               chunked: true,//允许分片上传
               chunkSize:2*1024*1024,//每个分片大小
               auto: true,//是否自动上传
               duplicate:true,//去除重复
               fileNumLimit:20,//上传文件个数限制  
               fileSingleSizeLimit:20*1024*1024, //单个文件大小限制  20M
               accept: {
                title: '文字描述',//文字描述
                extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
                mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
               }
        });
        uploader.on('uploadStart', function (file) {
              alert("这是文件上传前的操作函数");
        });
        $("#ctlBtn").click(function () {
            alert("要使用手动上传请设置参数");
          //  uploader.upload();//这是将参数配置auto设置 false 手动上传
        });
        uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
             var $list = $("#fileList"),
             $li = $(
             '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>'+ '<div class="info">' + file.name + '</div>' + '</div>'
             ),
             $img = $li.find('img');         
             // $list为容器jQuery实例
             $list.append( $li );  
             // 创建缩略图
             uploader.makeThumb( file, function( error, src ) { //src base_64位
                 if ( error ) {
                     $img.replaceWith('<span>不能预览</span>');
                     return;
                 }
               
                 $img.attr( 'src', src );
             }, 100, 100 ); //100x100为缩略图尺寸
        });
        // 文件上传过程中创建进度实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var ss=(percentage*100)+"%";
            $("#ss").text(ss);
        });
           
        // 文件上传成功
        uploader.on( 'uploadSuccess', function( file, res ) {
             alert("这是文件上传成功的操作函数");
             console.log(res.filePaht);//这里可以得到上传后的文件路径
        });
 
    });
</script>

php代码

<?php
 
/**
 * @Author: Administrator
 * @Date:   2017-11-22 17:17:48
 * @Last Modified by:   liao
 * @Last Modified time: 2018-01-16 21:23:29
 */
 
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header("Cache-Control: no-store, no-cache, must-revalidate");
  header("Cache-Control: post-check=0, pre-check=0", false);
  header("Pragma: no-cache");
//字符串转码 无论是什么文件名称，先unicode转utf8 unicode转utf8 注意$str='"..."'，内部双引号，外部单引号 对于变量$str='..'，我们需要处理'"'.$str.'"',处理后成一个新变量
function unicode2utf8($str){
  if(!$str) return $str;
  $decode = json_decode($str);
  if($decode) return $decode;
  $str = '["' . $str . '"]';
  $decode = json_decode($str);
  if(count($decode) == 1){
  return $decode[0];
  }
  return $str;
} 
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header("Cache-Control: no-store, no-cache, must-revalidate");
  header("Cache-Control: post-check=0, pre-check=0", false);
  header("Pragma: no-cache");
  
  if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   exit; // finish preflight CORS requests here
  }
  if ( !empty($_REQUEST[ 'debug' ]) ) {
   $random = rand(0, intval($_REQUEST[ 'debug' ]) );
   if ( $random === 0 ) {
    header("HTTP/1.0 500 Internal Server Error");
    exit;
   }
  }
  // header("HTTP/1.0 500 Internal Server Error");
  // exit;
  // 5 minutes execution time
  @set_time_limit(5 * 60);
  // Uncomment this one to fake upload time
  // usleep(5000);
  // Settings
  // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
  $targetDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material_tmp';
  $uploadDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material';
  $cleanupTargetDir = true; // Remove old files
  $maxFileAge = 5 * 3600; // Temp file age in seconds
  // Create target dir
  if (!file_exists($targetDir)) {
   @mkdir($targetDir);
  }
  // Create target dir
  if (!file_exists($uploadDir)) {
   @mkdir($uploadDir);
  }
  // Get a file name
  if (isset($_REQUEST["name"])) {
   $fileName = $_REQUEST["name"];
  } elseif (!empty($_FILES)) {
   $fileName = $_FILES["file"]["name"];
  } else {
   $fileName = uniqid("file_");
  }
  //-------------------------------------------------------
    $fileName=unicode2utf8('"'.$fileName.'"');
    $fileName= iconv("UTF-8", "GBK", $fileName);//防止fopen语句失效
    //-----------------------------------------------------------------------
  $oldName = $fileName;
  $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
  // $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;
  // Chunking might be enabled
  $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
  $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;
  // Remove old temp files
  if ($cleanupTargetDir) {
   if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
    die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
   }
   while (($file = readdir($dir)) !== false) {
    $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;
    // If temp file is current file proceed to the next
    if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
     continue;
    }
    // Remove temp file if it is older than the max age and is not the current file
    if (preg_match('/.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
     @unlink($tmpfilePath);
    }
   }
   closedir($dir);
  }
  // Open temp file
  if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
   die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
  }
  if (!empty($_FILES)) {
   if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
    die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
   }
   // Read binary input stream and append it to temp file
   if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
    die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
   }
  } else {
   if (!$in = @fopen("php://input", "rb")) {
    die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
   }
  }
  while ($buff = fread($in, 4096)) {
   fwrite($out, $buff);
  }
  @fclose($out);
  @fclose($in);
  rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");
  $index = 0;
  $done = true;
  for( $index = 0; $index < $chunks; $index++ ) {
   if ( !file_exists("{$filePath}_{$index}.part") ) {
    $done = false;
    break;
   }
  }
  
  
  
  if ( $done ) {
   $pathInfo = pathinfo($fileName);
   $hashStr = substr(md5($pathInfo['basename']),8,16);
   $hashName = time() . $hashStr . '.' .$pathInfo['extension'];
   $uploadPath = $uploadDir . DIRECTORY_SEPARATOR .$hashName;
  
   if (!$out = @fopen($uploadPath, "wb")) {
    die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
   }
   if ( flock($out, LOCK_EX) ) {
    for( $index = 0; $index < $chunks; $index++ ) {
     if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
      break;
     }
     while ($buff = fread($in, 4096)) {
      fwrite($out, $buff);
     }
     @fclose($in);
     @unlink("{$filePath}_{$index}.part");
    }
    flock($out, LOCK_UN);
   }
   @fclose($out);
   $response = [
    'success'=>true,
    'oldName'=>$oldName,
    'filePaht'=>$uploadPath,
    'fileSuffixes'=>$pathInfo['extension'],
    ];
  
   echo json_encode($response);
   exit();
  }
  
  // Return Success JSON-RPC response
  die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');
 
?>

这里是webuploader 的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="webuploader.js"></script>
    <style type="text/css">
      .webuploader-container {
            position: relative;
        }
        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
        }
        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            padding: 10px 15px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        .webuploader-pick-hover {
            background: #00a2d4;
        }
 
        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events:none;
        }
    </style>
</head>
<body>
    <div id="uploader" class="wu-example">
         <!--用来存放文件信息-->
         <div id="thelist" class="uploader-list"></div>
         <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
         </div>
     </div>
     <div id="fileList"></div>
     <div id="ss"></div>
</body>
</html>

　　JavaScript代码

<script type="text/javascript">
    jQuery(function() {
        var  uploader;
        uploader = WebUploader.create({
               resize: false, // 不压缩image     
               swf: 'uploader.swf',// swf文件路径    
               server: 'upload.php', // 文件接收服务端。 
               pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
               chunked: true,//允许分片上传
               chunkSize:2*1024*1024,//每个分片大小
               auto: true,//是否自动上传
               duplicate:true,//去除重复
               fileNumLimit:20,//上传文件个数限制  
               fileSingleSizeLimit:20*1024*1024, //单个文件大小限制  20M
               accept: {
                title: '文字描述',//文字描述
                extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
                mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
               }
        });
        uploader.on('uploadStart', function (file) {
              alert("这是文件上传前的操作函数");
        });
        $("#ctlBtn").click(function () {
            alert("要使用手动上传请设置参数");
          //  uploader.upload();//这是将参数配置auto设置 false 手动上传
        });
        uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
             var $list = $("#fileList"),
             $li = $(
             '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>'+ '<div class="info">' + file.name + '</div>' + '</div>'
             ),
             $img = $li.find('img');         
             // $list为容器jQuery实例
             $list.append( $li );  
             // 创建缩略图
             uploader.makeThumb( file, function( error, src ) { //src base_64位
                 if ( error ) {
                     $img.replaceWith('<span>不能预览</span>');
                     return;
                 }
               
                 $img.attr( 'src', src );
             }, 100, 100 ); //100x100为缩略图尺寸
        });
        // 文件上传过程中创建进度实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var ss=(percentage*100)+"%";
            $("#ss").text(ss);
        });
           
        // 文件上传成功
        uploader.on( 'uploadSuccess', function( file, res ) {
             alert("这是文件上传成功的操作函数");
             console.log(res.filePaht);//这里可以得到上传后的文件路径
        });
 
    });
</script>

查看全文

相关阅读:
ubuntu远程windows桌面
 spring boot 给返回值加状态 BaseData
spring boot 拦截异常统一处理
 IntelliJ IDEA spring boot 远程Ddbug调试
 IntelliJ IDEA 常用插件
 spring boot 请求地址带有.json 兼容处理
 spring boot 接口返回值去掉为null的字段
 spring boot 集成disconf
Spring boot 自定义拦截器
 Linux下安装MySQL

原文地址：https://www.cnblogs.com/gaosf/p/14111216.html