多檔案上傳的外掛程式常用的有：
1、jquery uploadify 下載【http://www.uploadify.com/download/】
2、jquery file upload 下載【https://github.com/blueimp/jQuery-File-Upload/tags】
3、webuploader 下載【http://fex.baidu.com/webuploader/download.html】
註：
在使用的時候，要參照官網的文檔說明，如果看不明白，可以百度一下想知道的，必境我這裡只是入門的小執行個體
一、jquery uploadify
該外掛程式已經把檔案寫好了（index.php和uploadify.php），下載後改下上傳路徑就行了，這裡沒什麼要講的
二、jquery file upload 以Thinkphp為例 Home模組下的Index控制器
布局檔案index.html：
<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>檔案上傳</title> <link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css"/> <script src="__PUBLIC__/jquery.min.js"></script> <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload.css"> <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css"> <script src="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script> <script src="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script> <script src="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script></head><body> <div class="container"> <div class="row fileupload-buttonbar" style="padding-left:15px;"> <div class="thumbnail col-sm-6"> <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div> <div class="caption" align="center"> <span id="weixin_upload" class="btn btn-primary fileinput-button"> <span>上傳</span> <input type="file" id="weixin_image" name="weixin_image[]" data-url="__CONTROLLER__/uploadImg" multiple> </span> </div> </div> </div> </div> <script> $(function() { $("#weixin_image").fileupload({ dataType: 'json', acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // 檔案上傳類型 sequentialUploads: true, // 連續上傳配置 add: function (e, data) { //提交到伺服器端 data.submit(); } }).bind('fileuploadprogress', function (e, data) { // 綁定上傳進度 var progress = parseInt(data.loaded / data.total * 100, 10); $("#weixin_progress").css('width',progress + '%'); $("#weixin_progress").html(progress + '%'); }).bind('fileuploaddone', function (e, data) { // 上傳完成處理 $("#weixin_upload").css({display:"none"}); $('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="圖片" data-holder-rendered="true">'); }); }); </script></body></html>
Index控制器下的uploadImg方法
/* 檔案上傳處理 */public function uploadImg(){ $upload = new \Think\Upload();// 執行個體化上傳類 $upload->maxSize = 3145728 ;// 設定附件上傳大小 //$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳類型 $upload->rootPath = './Public/Uploads/'; // 設定附件上傳根目錄 $upload->savePath = ''; // 設定附件上傳（子）目錄 $upload->autoSub = false; // 關閉子目錄 // 上傳檔案 $info = $upload->upload(); if(!$info) {// 上傳錯誤提示錯誤資訊 $this->error($upload->getError()); }else{// 上傳成功 擷取上傳檔案資訊 $pathArr = array(); foreach($info as $file){ array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']); } echo json_encode($pathArr); }}
三、webuploader (也是以Thinkphp為例) 可以多檔案多圖片大檔案上傳
HTML布局：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>webuploader</title> <link rel="stylesheet" href="__PUBLIC__/webuploader/webuploader.css"/> <script src="__PUBLIC__/jquery.min.js"></script> <script src="__PUBLIC__/webuploader/webuploader.js"></script> <style> * { padding: 0; margin: 0; } .progress { position: absolute; top: 0; left: 0; width: 100px; height: 15px; font-size: 12px; color: #fff; text-align: center; line-height: 15px; } .uploader-list .file-item { position: relative; } .progress span { display: inline-block; height: 100%; background: #1C9F09; } </style></head><body><div id="uploader-demo"> <!--用來存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">選擇圖片</div></div></body></html>
JS指令碼：
<script> // 圖片上傳demo 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: '__PUBLIC__/webuploader/Uploader.swf', // 檔案接收服務端。 server: '__CONTROLLER__/webuploader', // 選擇檔案的按鈕。可選。 // 內部根據當前運行是建立，可能是input元素，也可能是flash. pick: '#filePicker', // 只允許選擇檔案，可選。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 當有檔案添加進來的時候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<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></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%'); }); // 檔案上傳成功，給item添加成功class, 用Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
