jQuery Plupload上傳插件的使用

更新時(shí)間：2017年04月19日 15:25:46 作者：古越劍簫

這篇文章主要介紹了 jQuery Plupload上傳插件的使用詳解,需要的朋友可以參考下

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

因?yàn)镻lupload可配置參數(shù)比較多，所以這里講解最常用的，結(jié)合jquery-ui展示的界面！如下:

Plupload默認(rèn)支持html5,flash,silverlight,html4,四種上傳方式,按照順序進(jìn)行加載，如果瀏覽器不支持html5則會(huì)選擇flash...到最后html4,

如果不需要某種上傳方式,在配置里面不寫(xiě)即可！

直接上代碼

<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',//這里可以不寫(xiě),plupload默認(rèn)支持
      url: "UploadPhotoServlet",//上傳后臺(tái)請(qǐng)求路徑
      max_file_size: '1000mb',//用來(lái)限制單個(gè)文件大小的
      multi_selection: true,//默認(rèn)支持多文件上傳,false不支持
      chunk_size: '0',//是否將上傳文件進(jìn)行分片,0代表是不分
      /*resize配置是對(duì)圖片的處理
        可以使用該參數(shù)對(duì)將要上傳的圖片進(jìn)行壓縮，該參數(shù)是一個(gè)對(duì)象，里面包括5個(gè)屬性：width：指定壓縮后圖片的寬度，如果沒(méi)有設(shè)置該屬性則默認(rèn)為原始圖片的寬度
        height：指定壓縮后圖片的高度，如果沒(méi)有設(shè)置該屬性則默認(rèn)為原始圖片的高度
        crop：是否裁剪圖片
        quality：壓縮后圖片的質(zhì)量，只對(duì)jpg格式的圖片有效，默認(rèn)為90。quality可以跟width和height一起使用，但也可以單獨(dú)使用，單獨(dú)使用時(shí)，壓縮后圖片的寬高不會(huì)變化，但由于質(zhì)量降低了，所以體積也會(huì)變小
        preserve_headers：壓縮后是否保留圖片的元數(shù)據(jù)，true為保留，false為不保留,默認(rèn)為true。刪除圖片的元數(shù)據(jù)能使圖片的體積減小一點(diǎn)點(diǎn)
        resize參數(shù)的配置示例如下：
      */
      /* resize : {
        width: 200,
        height: 200,
        quality: 90,
        crop: true
      }, */
      /* rename: true, *///允許多隊(duì)列文件進(jìn)行重命名
      /* sortable: true,*/ //啟用隊(duì)列中的文件排序功能，更改上傳優(yōu)先級(jí)
      /*dragdrop: true, */ //開(kāi)啟拖拽上傳,默認(rèn)true
      /*
        下面是展示右邊的縮略圖和列表 兩個(gè)功能
        默認(rèn)顯示縮略圖
      */
      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>

在官方文檔有這樣一句話(huà)

也就是說(shuō)，UI.Plupload 需要jquery-ui的支持,http://jqueryui.com/download/ 選擇合適的主題，我選的是這個(gè)

完整的引入文件是

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

常見(jiàn)問(wèn)題：

1、如果你發(fā)現(xiàn)點(diǎn)擊選擇文件按鈕，彈出文件框特別慢，那么將，過(guò)濾文件代碼去掉即可！根據(jù)具體情況，自己設(shè)置

filters: {
mime_types : [ //只允許上傳圖片和zip文件
{ title : "Image files", extensions : "jpg,gif,png" },
{ title : "Zip files", extensions : "zip" }
],
max_file_size : '400kb', //最大只能上傳400kb的文件
prevent_duplicates : true //不允許選取重復(fù)文件
}

可以使用該參數(shù)來(lái)限制上傳文件的類(lèi)型，大小等，該參數(shù)以對(duì)象的形式傳入，它包括三個(gè)屬性：mime_types：用來(lái)限定上傳文件的類(lèi)型，為一個(gè)數(shù)組，該數(shù)組的每個(gè)元素又是一個(gè)對(duì)象，該對(duì)象有title和extensions兩個(gè)屬性，title為該過(guò)濾器的名稱(chēng)，extensions為文件擴(kuò)展名，有多個(gè)時(shí)用逗號(hào)隔開(kāi)。該屬性默認(rèn)為一個(gè)空數(shù)組，即不做限制。

max_file_size：用來(lái)限定上傳文件的大小，如果文件體積超過(guò)了該值，則不能被選取。值可以為一個(gè)數(shù)字，單位為b,也可以是一個(gè)字符串，由數(shù)字和單位組成，如'200kb'

prevent_duplicates：是否允許選取重復(fù)的文件，為true時(shí)表示不允許，為false時(shí)表示允許，默認(rèn)為false。如果兩個(gè)文件的文件名和大小都相同，則會(huì)被認(rèn)為是重復(fù)的文件

2、如果后臺(tái)使用是的是文件域名稱(chēng)接收文件，并且附加有額外參數(shù)

需要額外設(shè)置兩個(gè)參數(shù)

file_data_name:"uploadFile",//指定文件上傳時(shí)文件域的名稱(chēng)，默認(rèn)為file,例如在php中你可以使用$_FILES['file']來(lái)獲取上傳的文件信息
/* resize : {
  width: 200,
  height: 200,
  quality: 90,
  crop: true // crop to exact dimensions
}, */
multipart_params:{//上傳時(shí)的附加參數(shù)，以鍵/值對(duì)的形式傳入，服務(wù)器端可是使用$_POST來(lái)獲取這些參數(shù)(以php為例)
 "prefixName":"magazine"
},

3、在和easyui,extjs等UI庫(kù)進(jìn)行整合時(shí)候，引入Plupload的文件一定要在easyui的引入文件之前，否則easyui會(huì)出現(xiàn)一些莫名奇妙的錯(cuò)誤！

ok,到這里基本完成Plupload的使用，plupload中文參考文檔 http://www.phpin.net/tools/plupload/，

這個(gè)文檔僅僅介紹了Plupload基本的options,一些UI高級(jí)用法需要參考,

http://www.plupload.com/docs/v2/UI.Plupload#Constructor-method

以上所述是小編給大家介紹的jQuery Plupload上傳插件的使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: