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); } } }