jQuery Plupload上傳外掛的使用方法詳解
本文主要介紹了 jQuery Plupload上傳外掛的使用詳解,需要的朋友可以參考下，希望能幫助大家。
先下載plupload->http://www.plupload.com
因為Plupload可設定參數比較多，所以這裡講解最常用的，結合jquery-ui展示的介面！如下:
Plupload預設支援html5,flash,silverlight,html4,四種上傳方式,依照順序進行加載，如果瀏覽器不支援html5則會選擇flash.. .到最後html4,
如果不需要某種上傳方式,在配置裡面不寫即可！
直接上程式碼
<body>
<p id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</p>
<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 ajaxfileupload非同步上傳外掛程式詳解
以上是jQuery Plupload上傳外掛的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
DirectX修復工具怎麼用？ DirectX修復工具詳細使用方法
Mar 15, 2024 am 08:31 AM
DirectX修復工具是專業的系統工具，主要功能是偵測目前系統的DirectX狀態，如果發現異常就可以直接修復。可能還有很多用戶不清楚DirectX修復工具怎麼用吧，以下就來看看詳細教學。 1、使用修復工具軟體進行修復檢測。 2、如果修復完成後提示C++元件有異常的問題，請點選取消按鈕，然後點選工具選單列。 3、點選選項按鈕，選擇擴展，點選開始擴展按鈕。 4、擴展完成後再重新進行檢測修復即可。 5、如果修復工具操作完成後仍未解決問題，可以嘗試卸載重新安裝報錯的程序。
百度網盤怎麼用-百度網盤的使用方法
Mar 04, 2024 pm 09:28 PM
有很多朋友還不知道百度網盤怎麼用，所以下面小編就講解了百度網盤的使用方法，有需要的小伙伴趕緊來看一下吧，相信對大家一定會有所幫助哦。第一步：安裝好百度網盤後直接登入(如圖);第二步：接著可依頁面提示選擇「我的分享」與「傳輸清單」(如圖);第三步：在「好友分享」裡可以把圖片和檔案直接分享給好友(如圖所示);第四步：接著選擇「分享」後可勾選電腦檔案或是網盤檔案(如圖所示);第五步：然後就可以尋找好友(如圖所示);第六步：還可以在「功能寶箱」中尋找自己需要的功能(如圖所示)。上面就是小編為大
KMS啟動工具是什麼？ KMS啟動工具怎麼用？ KMS啟動工具使用方法？
Mar 18, 2024 am 11:07 AM
KMS啟動工具是一種用來啟動微軟Windows和Office產品的軟體工具。 KMS是KeyManagementService的縮寫，即金鑰管理服務。 KMS啟動工具透過模擬KMS伺服器的功能，使得電腦可以連接到這個虛擬的KMS伺服器，從而實現對Windows和Office產品的啟動。 KMS激活工具體積小巧，功能強大，可以一鍵永久激活，無需聯網狀態就可以激活任何版本的window系統和任何版本的Office軟體，是目前最成功的且經常更新的Windows激活工具，今天小編就跟大家介紹一下kms激活工
potplayer怎麼用-potplayer的使用方法
Mar 04, 2024 pm 06:10 PM
potplayer是一款非常強大的媒體播放器，但不少夥伴還不知道potplayer怎麼用，今天小編就來詳細介紹一下potplayer的使用方法，希望能幫助大家。 1.PotPlayer快捷鍵PotPlayer播放器預設常用快捷鍵如下：(1)播放/暫停：空格(2)音量：滑鼠滾輪，上下方向鍵(3)前進/後退：左右方向鍵(4)書籤：P-加入書籤，H-查看書籤(5)全螢幕/還原：Enter(6)倍速：C-加速，X-減速，Z-復位(按一次調整0.1倍速度，可以在0.2到12倍速之間調節)( 7)上/下一幀：D/
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
小馬win7啟動工具如何使用-小馬win7啟動工具使用的方法
Mar 04, 2024 pm 06:16 PM
相信很多用戶都在使用小馬win7激活工具，但是你們知道小馬win7激活工具如何使用嗎?接著，小編就帶來了小馬win7激活工具使用的方法，對此感興趣的用戶快來下文看看吧。第一步，在重裝系統後，進入“”我的電腦，點擊上方選單中的“系統屬性”，查看Windows啟動狀態。第二步，點選上網下載win7啟動工具，點選打開，(資源很多哪裡都有)。第三步，開啟小馬啟動工具後，點選「一件永久啟動Windows」。第四步，等待啟動程序完成啟動。第五步，再次查看Windows啟動狀態，發現系統已啟動。
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
