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

時間 2019-11-17

標籤 web jquery 上傳插件 plupload 使用欄目 HTML 简体版

原文原文鏈接

首先下載plupload->http://www.plupload.comjavascript

由於Plupload可配置參數比較多，因此這裏講解最經常使用的，結合jquery-ui展現的界面！以下:php

Plupload默認支持html5,flash,silverlight,html4,四種上傳方式,按照順序進行加載，若是瀏覽器不支持html5則會選擇flash...到最後html4,css

若是不須要某種上傳方式,在配置裏面不寫便可！html

直接上代碼html5

<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>

在官方文檔有這樣一句話java

也就是說，UI.Plupload 須要jquery-ui的支持,http://jqueryui.com/download/ 選擇合適的主題，我選的是這個 jquery

完整的引入文件是數組

<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>

常見問題：瀏覽器

一、若是你發現點擊 選擇文件 按鈕，彈出文件框特別慢，那麼將，過濾文件代碼去掉便可！根據具體狀況，本身設置服務器

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。若是兩個文件的文件名和大小都相同，則會被認爲是重複的文件

二、若是後臺使用是的是文件域名稱接收文件，而且附加有額外參數

須要額外設置兩個參數

 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"
},

三、在和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

相關標籤/搜索