大文件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代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<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> |
