多附件上傳控件plupload的使用心得


在使用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 += '

' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ')

'; } });

//文件上傳的進度

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不支持,其他瀏覽器都支持得挺好。

 


免責聲明!

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



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