webuploader实现大文件上传
来源:互联网 发布:excel跨文件数据交互 编辑:程序博客网 时间:2024/05/22 05:24
目前在公司项目里遇到了需要上传大文件(视频、音频)的情况,特此记录。
此次项目引用了一款名为Webuploader的插件。官网:http://fex.baidu.com/webuploader/getting-started.html
html代码:
<html><head> <meta charset="utf-8"> <script src="jquery-2.1.1.js"></script> <link rel="stylesheet" type="text/css" href="webuploader.css"> <script type="text/javascript" src="webuploader.js"></script></head><body><style>.progress-bar{background-color:red}</style><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><script>$(function(){ var uploader = WebUploader.create({ swf: 'Uploader.swf', server: 'http://www.test.loc/webuploader/upload.php', pick: '#picker', resize: false, chunked: true //是否切片 }); var $list = $('#thelist'), state = 'pending'; uploader.on( 'fileQueued', function( file ) { $list.append( '<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">已添加...</p>' + '</div>' ); }); uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); if ( !$percent.length ) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%;height:30px;">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' ); }); uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).find('p.state').text('已上传'); }); uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).find('p.state').text('上传出错'); }); uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').fadeOut(); }); $('#ctlBtn').on( 'click', function() { if ( state === 'uploading' ) { uploader.stop(true); state = "pending"; } else { uploader.upload(); state = "uploading"; } });})</script></body></html>
后台upload.php
<?phpheader('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');$aFiles = getUploadFiles();saveMultiFiles($aFiles[0]);function getUploadFiles(){ $aFiles = $_FILES; $aMultiFiles = array(); // 判断是否是分片上传 $iChunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0; $iChunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0; foreach ($aFiles as $sKey => $mFiles) { if (is_array($mFiles['name'])) { $iCnt = count($mFiles['name']); for ($i = 0; $i < $iCnt; ++$i) { $aMultiFiles[] = array( 'key' => $sKey . '_' . $i, 'name' => $mFiles['name'][$i], 'tmp_name' => $mFiles['tmp_name'][$i], 'error' => $mFiles['error'][$i], 'size' => $mFiles['size'][$i], 'chunk' => $iChunk, 'chunks' => $iChunks, ); } } else { $aMultiFiles[] = array( 'key' => $sKey, 'name' => $mFiles['name'], 'tmp_name' => $mFiles['tmp_name'], 'error' => $mFiles['error'], 'size' => $mFiles['size'], 'chunk' => $iChunk, 'chunks' => $iChunks, ); } } return $aMultiFiles;}/** * 将临时文件合并成正式文件 */function saveMultiFiles($aFile){ $tmp_file_path = './tmp'; $p_sName = $aFile['name']; $p_sNameFilename = pathinfo($p_sName, PATHINFO_FILENAME); $p_sFilePath = $tmp_file_path.DIRECTORY_SEPARATOR.$p_sNameFilename; $p_sFilenamePath = $tmp_file_path.DIRECTORY_SEPARATOR.$p_sName; if (!file_exists($p_sFilenamePath)) { fopen($p_sFilenamePath, "w"); } $p_sTmpName = $aFile['tmp_name']; $p_iError = $aFile['error']; $p_iSize = $aFile['size']; $iChunk = $aFile['chunk'] ; $iChunks = $aFile['chunks']; $iError = 0; if ($p_iError > 0) { // 文件上传出错 $iError = 1; $mReturn = '文件上传出错'; break; } if (!is_uploaded_file($p_sTmpName)) { $iError = 2; $mReturn = 'upload error, use http post to upload'; break; } $oFInfo = finfo_open(); $sMimeType = finfo_file($oFInfo, $p_sTmpName, FILEINFO_MIME_TYPE); finfo_close($oFInfo); $sExtension = pathinfo($p_sName, PATHINFO_EXTENSION); if (empty($sExtension)) { $iError = 2; $mReturn = 'upload error, The file does not have an extension '; break; } if (!$in = @fopen($p_sTmpName, "rb")) { $iError = 1; $mReturn = "Failed to open input stream."; break; } if (!$out = @fopen("{$p_sFilePath}_{$iChunk}.parttmp", "wb")) { $iError = 1; $mReturn = "Failed to open output stream."; break; } while ($buff = fread($in, 4096)) { fwrite($out, $buff); } @fclose($out); @fclose($in); rename("{$p_sFilePath}_{$iChunk}.parttmp", "{$p_sFilePath}_{$iChunk}.part"); $done = true; for ($index = 0; $index < $iChunks; $index++) { if (!file_exists("{$p_sFilePath}_{$index}.part")) { $done = false; break; } } if ($done) { $sDestFile = './upload/'.time().'.'.$sExtension; //合并文件地址 if (!$out = @fopen($sDestFile, "wb")) { $iError = 1; $mReturn = "1Failed to open output stream."; break; } $sFileSize = 0; if (flock($out, LOCK_EX)) { for ($index = 0; $index < $iChunks; $index++) { if (!$in = @fopen("{$p_sFilePath}_{$index}.part", "rb")) { break; } while ($buff = fread($in, 4096)) { fwrite($out, $buff); } @fclose($in); @unlink("{$p_sFilePath}_{$index}.part"); } flock($out, LOCK_UN); } @fclose($out); // 删除临时文件 @unlink($p_sFilenamePath); } return true;}
PS:事先需设置好服务器(nginx)和PHP的最大上传文件大小限制,不然会报错
阅读全文
1 0
- webuploader实现大文件上传
- webuploader 实现大文件 分片上传
- 使用百度webuploader实现大文件上传
- 利用WebUploader实现大文件上传和视频上传
- 使用webuploader上传大文件
- webuploader分片上传大文件
- 插件webuploader实现文件上传
- webUploader插件实现文件上传
- 插件webuploader实现文件上传
- 插件webuploader实现文件上传
- WebUploader+SpringMVC实现文件上传功能
- WebUploader+SpringMVC实现文件上传功能
- 基于NodeJs的Express及Webuploader实现大文件分片上传与合并(一)
- webuploader上传文件插件
- 文件上传 webuploader
- webuploader上传文件组件
- WebUploader上传文件
- WebUploader删除上传文件
- 千万别让心情主宰你的生活
- 关于模块化设计的内聚和耦合的个人理解
- dojoConfig配置自定义模块
- Java 基本类型优先于包装类型,以及二者之间的选择
- 线上bug记录
- webuploader实现大文件上传
- mysql数据库类型比较
- 如何成为一名成功的程序员
- sql优化
- TensorBoard本地使用
- 模运算的世界--费马小定理
- 检查当前运行的Linux是在VM还是在实体机中的方法
- JMeter简单的GET请求,参数化
- 冒泡排序-JAVA