【web】之 jquery上傳插件的Plupload的使用


首先下載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"/>
	<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"/>
	<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

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM