更新时间：2017-7-26 10:16:39
更新说明：版本更新到2.31版，修复下载文件错误问题
Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。Plupload还提供其它功能包括：上传进度提醒、图片缩小、多文件上传，拖拽文件到上传控件，文件类型过滤和Chunked上传等。这些功能在不同的上传方式中支持情况会受到限制。
官网上有该控件的详细使用说明。以下贴出的只是根据项目需要所做的一些属性。
在页面上添加引用
1 2 3 4 5 6 7 | <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>（不需要可以去掉） |
1 2 3 4 5 6 7 8 | var uploader = new plupload.Uploader({runtimes : 'flash', //官网上默认是gears,html5,flash,silverlight,browserplusbrowse_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文档到数据库后，用
1 2 3 4 5 | Response.ContentType = "text/html";Response.BinaryWrite(body);Response.Flush();Response.Close();Response.End(); |
这种方式查看附件时，直接打开的HTML页面会掺杂一些未能解析的流信息。
//文件添加时，会在容器里显示待上传的文件列表
1 2 3 4 5 6 7 8 | uploader.bind('FilesAdded',function(up, files) { for (var i in files) { $('filelist').innerHTML += '' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ')'; }}); |
//文件上传的进度
1 2 3 4 | uploader.bind('UploadProgress',function(up, file) { $(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%";}); |
//文件上传成功后的总计
1 2 3 4 | uploader.bind('UploadComplete',function(up, files) { $('filelist').innerHTML = "您选择的文件已经全部上传，总计共" + files.length + "个文件";}); |
// 这是一个选择完成后的上传按钮。点击按钮后，附件才开始上传
1 2 3 4 | $('ibtMultiSubmit').onclick = function() { uploader.start(); return false;}; |
1 | uploader.init(); |
后台服务页面的代码：
网上有人使用这种方式：
1 2 3 4 5 6 7 8 | 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不支持，其他浏览器都支持得挺好。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery日期和时间的输入选择
- 下一个特效： jQuery的Google地图插件 GMAP3