当前位置: 首頁 > javascript > Plupload多文件上传插件

Plupload多文件上传插件

Plupload这个JavaScript控件可以让你选择Adobe FlashGoogle GearsHTML5Microsoft SilverlightYahoo BrowserPlus或正常表单Form等多种方法进行文件上传。Plupload还提供其它功能包括:上传进度提醒、图片缩小、多文件上传,拖拽文件 到上传控件,文件类型过滤和Chunked上传等。这些功能在不同的上传方式中支持情况会受到限制。

 

以下贴出的只是根据项目需要所做的一些属性。

 

在页面上添加引用

<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_sizeresize(该属性能压缩图片,所以该控件对图片上传很有好处,推荐使用)可以查看官网的文档。如果你想简 单的传递附件然后浏览,最好设置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:truefalse时,获取的流不同。并且它貌似不像uploadify那样提供动态获取参数的功 能,所以如果某些想要传递到后台的参数不是页面初始化时设定的,可以考虑变换方式,比如在设置好参数的时候,触发事件再次初始化控件即可。该控件除了对 IE6不支持,其他浏览器都支持得挺好。

 

 

 


评论 ( 0 )

网友留言