首頁 > 開發者 > JavaScript
jQuery Plupload上傳外掛程式的使用，jqueryplupload
首先下載plupload->http://www.plupload.com
因為Plupload可配置參數比較多，所以這裡講解最常用的，結合jquery-ui展示的介面！如下:
Plupload預設支援html5,flash,silverlight,html4,四種上傳方式,按照順序進行載入，如果瀏覽器不支援html5則會選擇flash...到最後html4,
如果不需要某種上傳方式,在配置裡面不寫即可！
直接上代碼
<body> <div id="uploader"> <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p> </div> <script type="text/javascript"> $(function(){ $("#uploader").plupload({ runtimes: 'html5,flash,silverlight,html4',//這裡可以不寫,plupload預設支援 url: "UploadPhotoServlet",//上傳後台請求路徑 max_file_size: '1000mb',//用來限制單個檔案大小的 multi_selection: true,//預設支援多檔案上傳,false不支援 chunk_size: '0',//是否將上傳檔案進行分區,0代表是不分 /*resize配置是對圖片的處理 可以使用該參數對將要上傳的圖片進行壓縮，該參數是一個對象，裡麵包括5個屬性：width：指定壓縮後圖片的寬度，如果沒有設定該屬性則預設為原始圖片的寬度 height：指定壓縮後圖片的高度，如果沒有設定該屬性則預設為原始圖片的高度 crop：是否裁剪圖片 quality：壓縮後圖片的品質，只對jpg格式的圖片有效，預設為90。quality可以跟width和height一起使用，但也可以單獨使用，單獨使用時，壓縮後圖片的寬高不會變化，但由於品質降低了，所以體積也會變小 preserve_headers：壓縮後是否保留圖片的中繼資料，true為保留，false為不保留,預設為true。刪除圖片的中繼資料能使圖片的體積減小一點點 resize參數的配置樣本如下： */ /* resize : { width: 200, height: 200, quality: 90, crop: true }, */ /* rename: true, *///允許多隊列檔案進行重新命名 /* sortable: true,*/ //啟用隊列中的檔案排序功能，更改上傳優先順序 /*dragdrop: true, */ //開啟拖拽上傳,預設true /* 下面是展示右邊的縮圖和列表 兩個功能 預設顯示縮圖 */ views: { list: true, thumbs: true, // Show thumbs active: 'thumbs' }, /* flash 和 xap 上傳需要的檔案 */ flash_swf_url : 'plupload/js/Moxie.swf', silverlight_xap_url : 'plupload/js/Moxie.xap' }); })</script></body>
在官方文檔有這樣一句話
也就是說，UI.Plupload 需要jquery-ui的支援,http://jqueryui.com/download/ 選擇合適的主題，我選的是這個
完整的 引入檔案是
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="plupload/js/jquery.js"></script> <script type="text/javascript" src="plupload/js/jqueryui/jquery-ui.min.js"></script> <link rel="stylesheet" href="plupload/js/jqueryui/jquery-ui.min.css" rel="external nofollow" /> <script type="text/javascript" src="plupload/js/plupload.full.min.js"></script> <script type="text/javascript" src="plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js"></script> <script type="text/javascript" src="plupload/js/i18n/zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" rel="external nofollow" /> <title>plupload</title></head>
常見問題：
1、如果你發現點擊 選擇檔案 按鈕，彈出檔案框特別慢，那麼將，過濾檔案代碼去掉即可！根據具體情況，自己設定
filters: {mime_types : [ //只允許上傳圖片和zip檔案{ title : "Image files", extensions : "jpg,gif,png" },{ title : "Zip files", extensions : "zip" }],max_file_size : '400kb', //最大隻能上傳400kb的檔案prevent_duplicates : true //不允許選取重複檔案}
可以使用該參數來限制上傳檔案的類型，大小等，該參數以對象的形式傳入，它包括三個屬性：mime_types：用來限定上傳檔案的類型，為一個數組，該數組的每個元素又是一個對象，該對象有title和extensions兩個屬性，title為該過濾器的名稱，extensions為副檔名，有多個時用逗號隔開。該屬性預設為一個空數組，即不做限制。
max_file_size：用來限定上傳檔案的大小，如果檔案體積超過了該值，則不能被選取。值可以為一個數字，單位為b,也可以是一個字串，由數字和單位組成，如'200kb'
prevent_duplicates：是否允許選取重複的檔案，為true時表示不允許，為false時表示允許，預設為false。如果兩個檔案的檔案名稱和大小都相同，則會被認為是重複的檔案
2、如果後台使用是的是檔案網域名稱稱接收檔案，並且附加有額外參數
需要額外設定兩個參數
file_data_name:"uploadFile",//指定檔案上傳時檔案域的名稱，預設為file,例如在php中你可以使用$_FILES['file']來擷取上傳的檔案資訊/* resize : { width: 200, height: 200, quality: 90, crop: true // crop to exact dimensions}, */multipart_params:{//上傳時的附加參數，以鍵/值對的形式傳入，伺服器端可是使用$_POST來擷取這些參數(以php為例) "prefixName":"magazine"},
3、在和easyui,extjs等UI庫進行整合時候，引入Plupload的檔案一定要在easyui的引入檔案之前，否則easyui會出現一些莫名奇妙的錯誤！
ok,到這裡基本完成Plupload的使用，plupload中文參考文檔 http://www.phpin.net/tools/plupload/，
這個文檔僅僅介紹了Plupload基本的options,一些UI進階用法需要參考,
http://www.plupload.com/docs/v2/UI.Plupload#Constructor-method
以上所述是小編給大家介紹的jQuery Plupload上傳外掛程式的使用，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
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
