溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何在jQuery中使用Plupload上傳插件，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
首先下載plupload
因為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會出現一些莫名奇妙的錯誤！
關于如何在jQuery中使用Plupload上傳插件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
