1.搜索“webuploader”下载,解压,复制如下文件夹php
2.在页面引入css
<link rel="stylesheet" href="<?=img_url();?>webup/css/webuploader.css"> <script src="<?=img_url();?>webup/dist/webuploader.js"></script>
3.页面调用插件(jquery代码)jquery
jQuery(function() { var $ = jQuery, $list = $('#fileList'), // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // Web Uploader实例 uploader; // 初始化Web Uploader uploader = WebUploader.create({ // 自动上传。 auto: true, // swf文件路径 swf: 'Uploader.swf', // 文件接收服务端。 server: 'server.php?debug='+Math.random()*10000000, // 选择文件的按钮。可选。 // 内部根据当前运行是建立,多是input元素,也多是flash. pick: '#filePicker', // 只容许选择文件,可选。 accept: { title: 'Files', extensions: 'apk', mimeTypes: 'application/*' }, //chunked 大文件分片上传,参数具体查看官方文档 chunked : true, //是否开启 chunkSize : 5*1024*1024, //分片大小,5m chunkRetry : 5, //失败重复次数 threads : 5, //线程数 }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + //文件名是我本身加的,懒得翻官方文档,后端接受post '<img>' +'<input name = "fileName" value="' + file.name + '"/>'+ '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); $list.append( $li ); // 建立缩略图 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程当中建立进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复建立 if ( !$percent.length ) { $percent = $('<p class="progress"><span id="upOver"></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%'); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-done'); }); // 文件上传失败,现实上传出错。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复建立 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.text('上传失败'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on( 'uploadComplete', function( file ) { // $( '#'+file.id ).find('.progress').remove(); });
4.若是不想本身写代码就用 webuploader /server/fileupload.php,若是想本身尝试也能够参考 fileupload.php 本身码代码web
5.程序接受上传文件redis
如下是我本身瞎折腾,能够忽略后端
1)更改上传文件的默认路径,打开本身的server.php(或者插件默认上传 webuploader /server/fileupload.php ),找到app
$targetDir = 'upload_tmp'; $uploadDir = 'upload';
修改成dom
define('ROOT', dirname(dirname(dirname(dirname(__FILE__)))).DIRECTORY_SEPARATOR); $targetDir = ROOT.'/up_temp/'; $uploadDir = ROOT.'/up/';
2)文件从上传文件夹转移到下载文件夹,本身的程序根据业务调用post
//分片 public function apkSlice($olddir,$newdir){ $i = 0; //分割的块编号 $fp = fopen($olddir,"rb"); //要分割的文件 $file = fopen("up/split_hash.txt","a"); //记录分割的信息的文本文件,实际生产环境存在redis更合适 while(!feof($fp)){ $handle = fopen($newdir.$i."_temp","wb"); fwrite($handle,fread($fp,5*1024*1024));//切割的块大小 5m fwrite($file,$newdir.$i."_temp\r\n"); fclose($handle); if(filesize($newdir.$i."_temp") == 0){ exit('读取文件错误!'); } unset($handle); $i++; } fclose ($fp); fclose ($file); } //整合 public function apkJoin($newdir,$olddir){ $hash = file_get_contents("up/split_hash.txt"); //读取分割文件的信息 $list = explode("\r\n",$hash); $fp = fopen($newdir,"ab"); //合并后的文件名 foreach($list as $likey => $value){ if(!empty($value)) { $handle = fopen($value,"rb"); fwrite($fp,fread($handle,filesize($value))); fclose($handle); } } fclose($fp); unlink("up/split_hash.txt"); unlink($olddir); $this->clearTemp('up/temp/'); } //删除分片数据 function clearTemp($dir){ $dir_arr = scandir($dir); foreach($dir_arr as $key=>$val){ if($val == '.' || $val == '..'){} else { if(is_dir($dir.'/'.$val)) { clearTemp($dir.'/'.$val); } else unlink($dir.'/'.$val); } } }