在使用uploadify遇到問題時,去求救過plupload控件,使用uploadify所遇到的問題,可以看我的其他文章。plupload控件能解決我在使用uploadify時遇到的幾個問題,唯一讓我不能選用它的一個原因就是它不支持IE6,雖然現在IE6已經逐漸淘汰,不過可惜我做的是一個老項目,系統推薦使用的就是IE6,所以在此把使用plupload的一些心得貼上,如果以后做新系統可以用上。
它的官網地址:http://www.plupload.com/index.php
貌似官網地址都不支持IE6打開,呵呵。
我使用的是1.5.4版本
官網上有該控件的詳細使用說明。我一下貼出的只是根據我項目需要所做的一些屬性。
在頁面上添加引用
<script type="text/javascript" src="../js/plupload.js"></script>
<script type="text/javascript" src="../js/plupload.gears.js"></script>(不需要可以去掉)
<script type="text/javascript" src="../js/plupload.silverlight.js"></script>(不需要可以去掉)
<script type="text/javascript" src="../js/plupload.flash.js"></script>(不需要可以去掉,我項目中需要用)
<script type="text/javascript" src="../js/plupload.browserplus.js"></script>(不需要可以去掉)
<script type="text/javascript" src="../js/plupload.html4.js"></script>(不需要可以去掉)
<script type="text/javascript" src="../js/plupload.html5.js"></script>(不需要可以去掉)
var uploader = new plupload.Uploader({
runtimes : 'flash', //官網上默認是gears,html5,flash,silverlight,browserplus
browse_button : 'uploadify', //這個是點擊上傳的html標簽的id,可以a,button等等
container: 'container', //這個是容器的地址,
max_file_size : '10mb', //這是文件的最大上傳大小,得跟IIS結合使用
url : '/uploadhandler.aspx?' +'param1=value' , //服務器頁面地址,后面跟你想傳遞的參數
flash_swf_url : '/js/plupload/plupload.flash.swf', //flash地址
filters : [ {title : "網頁文件", extensions : "htm,html"} ], //文件過濾
multipart:false // 官網的解釋是設置傳遞到后台服務中的數據流結構,false的時候使用正常的字節流,如果為true,則使用mutlipart格式,可能是為了實現大附件分段上傳的功能
如果設置了multipart:true,則你可以附加使用multipart_params參數去傳遞參數而不用像我這樣通過在服務地址后面加參數。還有一些其他的屬性,諸如chunk_size,resize(該屬性能壓縮圖片,所以該控件對圖片上傳很有好處,推薦使用)可以查看官網的文檔。如果你想簡單的傳遞附件然后瀏覽,最好設置multipart:false,因為當你設置為true之后,你在后台中獲取的流格式會有點問題,我本人的經驗就是使用了true上傳了一個html文檔到數據庫后,用
Response.ContentType = "text/html";
Response.BinaryWrite(body);
Response.Flush();
Response.Close();
Response.End();
這種方式查看附件時,直接打開的HTML頁面會摻雜一些未能解析的流信息。
});
//文件添加時,會在容器里顯示待上傳的文件列表
uploader.bind('FilesAdded', function(up, files) { for (var i in files) { $('filelist').innerHTML += '
'; } });
//文件上傳的進度
uploader.bind('UploadProgress', function(up, file) { $(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; });
//文件上傳成功后的總計
uploader.bind('UploadComplete',function(up,files){ $('filelist').innerHTML="您選擇的文件已經全部上傳,總計共"+files.length+"個文件"; });
// 這是一個選擇完成后的上傳按鈕。點擊按鈕后,附件才開始上傳
$('ibtMultiSubmit').onclick = function() { uploader.start(); return false; };
uploader.init();
后台服務頁面的代碼:
網上有人使用這種方式:
Byte[] buffer = null;
if (Request.ContentType == "application/octet-stream" && Request.ContentLength > 0)
{
buffer = new Byte[Request.InputStream.Length];
Request.InputStream.Read(buffer, 0, buffer.Length);
}
else if (Request.ContentType.Contains("multipart/form-data") && Request.Files.Count > 0 && Request.Files[0].ContentLength > 0)
{
buffer = new Byte[Request.Files[0].InputStream.Length];
Request.Files[0].InputStream.Read(buffer, 0, buffer.Length);
}
來獲取附件內容,我基本也是借鑒他的,獲取參數就使用Request.Params["param1"]即可。
獲取到后,做自己的業務處理即可。
使用該控件時遇到的唯一問題就是multipart:為true和false時,獲取的流不同。並且它貌似不像uploadify那樣提供動態獲取參數的功能,所以如果某些想要傳遞到后台的參數不是頁面初始化時設定的,可以考慮變換方式,比如在設置好參數的時候,觸發事件再次初始化控件即可。該控件除了對IE6不支持,其他瀏覽器都支持得挺好。