Web文件上傳模塊 Plupload
Plupload 是一個Web瀏覽器上的界面友好的文件上傳模塊,可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
示例代碼:
<!-- Load Queue widget CSS and jQuery --> <style type="text/css">@import url(css/plupload.queue.css);</style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3"); </script> <!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes --> <script type="text/javascript" src="/plupload/js/gears_init.js"></script> <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script> <!-- Load plupload and all it's runtimes and finally the jQuery queue widget --> <script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script> <script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script> <script type="text/javascript"> // Convert divs to queue widgets when the DOM is ready $().ready(function() { $("#uploader").pluploadQueue({ // General settings runtimes : 'gears,flash,silverlight,browserplus,html5', url : 'upload.php', max_file_size : '10mb', chunk_size : '1mb', unique_names : true, // Resize images on clientside if we can resize : {width : 320, height : 240, quality : 90}, // Specify what files to browse for filters : [ {title : "Image files", extensions : "jpg,gif,png"}, {title : "Zip files", extensions : "zip"} ], // Flash settings flash_swf_url : '/plupload/js/plupload.flash.swf', // Silverlight settings silverlight_xap_url : '/plupload/js/plupload.silverlight.xap' }); // Client side form validation $('form').submit(function(e) { var uploader = $('#uploader').pluploadQueue(); // Validate number of uploaded files if (uploader.total.uploaded == 0) { // Files in queue upload them first if (uploader.files.length > 0) { // When all files are uploaded submit form uploader.bind('UploadProgress', function() { if (uploader.total.uploaded == uploader.files.length) $('form').submit(); }); uploader.start(); } else alert('You must at least upload one file.'); e.preventDefault(); } }); }); </script> ... <form ..> <div id="uploader"> <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p> </div> </form>
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!