webuploader 分片上传文件

最近研究了下大文件上传的方法，找到了webuploader js 插件进行大文件上传。

使用

 使用webuploader分成简单直选要引入

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"><!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

HTML部分

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

初始化Web Uploader

jQuery(function() {$list = $('#thelist'),$btn = $('#ctlBtn'),state = 'pending',uploader;uploader = WebUploader.create({// 不压缩imageresize: false,// swf文件路径swf: 'uploader.swf',// 文件接收服务端。server: upload.php,// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#picker',chunked: true,chunkSize:2*1024*1024,auto: true,accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}});

upload.php处理

一下是根据别人的例子自己拿来改的php 后台代码

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 dirif (!file_exists($targetDir)) {@mkdir($targetDir);}// Create target dirif (!file_exists($uploadDir)) {@mkdir($uploadDir);}// Get a file nameif (isset($_REQUEST["name"])) {$fileName = $_REQUEST["name"];} elseif (!empty($_FILES)) {$fileName = $_FILES["file"]["name"];} else {$fileName = uniqid("file_");}$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 filesif ($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 nextif ($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 fileif (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {@unlink($tmpfilePath);}}closedir($dir);}// Open temp fileif (!$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 fileif (!$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,'fileSize'=>$data['size'],'fileSuffixes'=>$pathInfo['extension'],'file_id'=>$data['id'],];die(json_encode($response));}// Return Success JSON-RPC responsedie('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');

官方文档有提供各种API详细了解可以在官方文档里找到你想要的。

webuploader 实现大文件分片上传相关推荐

.NetCore+WebUploader实现大文件分片上传
项目要求通过网站上传大文件,比如视频文件,通过摸索实现了文件分片来上传,然后后台进行合并. 使用了开源的前台上传插件WebUploader(http://fex.baidu.com/webupload ...
大文件分片上传，断点续传，秒传实现
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
使用webuploader组件实现大文件分片上传，断点续传
无组件断点续传.gif 1. 组件简介 webuploader:是一个以HTML5为主, Flash为辅的文件上传组件,采用大文件分片/并发上传的方式,极大地提高了文件上传的效率,同时兼容多种浏览器版 ...
jquery 分片上传php,php 大文件分片上传
前端部分上传 //上传控件 uploadBig('upload','zip,rar,7z,tar',{ id: '', type: 'upload_file', } ,(res)=>{ //t ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
大文件分片上传前后端实现
最近在做公司的视频业务,涉及到大视频的上传. 之前的图片.Excel等上传做的很简单,直接表单提交后端用MultipartFile接收保存到磁盘就行了. 但是针对大文件的上传,需要做额外的处理,否则可 ...
java实现大文件分片上传
java实现大文件分片上传在项目中用到了大文件上传功能,最初从网上参考了一些代码来实现,但是最终的上传效果不是很好,速度比较慢. 之前的上传思路是: 前端利用webUploader分片大文件后端接 ...
大文件分片上传前端框架_基于Node.js的大文件分片上传
基于Node.js的大文件分片上传我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳 ...
大文件分片上传前端框架_无插件实现大文件分片上传，断点续传
文件上传.gif 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试上传等需求的使用场景及实现: 2. 项目需求在一个音视频的添加中,既要有音视频 ...

webuploader 实现大文件分片上传

webuploader 分片上传文件

使用

HTML部分

初始化Web Uploader

upload.php处理

一下是根据别人的例子自己拿来改的php 后台代码

webuploader 实现大文件分片上传相关推荐

最新文章

热门文章

webuploader 实现大文件 分片上传

webuploader 分片上传文件

使用

HTML部分

初始化Web Uploader

upload.php处理

一下是根据别人的例子自己拿来改的php 后台代码

webuploader 实现大文件 分片上传相关推荐

最新文章

热门文章

webuploader 实现大文件分片上传

webuploader 实现大文件分片上传相关推荐