SWFObject文件上传使用方法记录,该插件使用起来相当强大也很灵活,与uploadify各有千秋。 值得一说的是,如果要设置button_image_url这个参数,该参数是按钮的背景图,但是一定要是4张等高纵向并列,如下图。
设置该参数虽然能达到修饰背景的效果,但是你会发现,flash在加载该图片的时候是有延迟的,所以呈现出来的效果就是,闪一下才能出来。 要解决这个问题,就只能绕道而行,放弃使用改参数。我们将插件的容器父窗体进行样式修饰,达到想要的结果,然后将插件的flash设置好宽高,重要的一点就是要设置flash为透明的。
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT
以下为示例代码~~~以及说明注释,详细参数还是去找度娘吧,网上各篇文章略有差异。
<script type="text/javascript"> var fujians = []; var fileid = 0; var queudid = ""; var openfujian = 0; //文件选择窗口关闭事件处理 //如果有文件成功选择并添加到上传队列,则自动上传 function fileDialogComplete(selectedNum, queuedNum) { if (queuedNum > 0) {//选择并添加到上传队列的文件数大于0 openfujian = queuedNum; this.startUpload();//开始上传 this.setButtonDisabled(true);//禁用上传按钮 OpenDialog('<div id="fujianbox" style="overflow-y: scroll;height: 180px;"></div>', '上传进度', 285, 225); } } //上传过程事件处理 //用来动态显示文件上传进度 function uploadProgress(file, curBytes, totalBytes) { var f = file; var c = curBytes; var t = totalBytes; var w = 235 * (curBytes / totalBytes); if ($("#fujianbox")) { if (queudid != f.id) { queudid = f.id; //操作 } else { $("#queudid" + f.id).css("width", w + "px"); $("#baifenbi" + f.id).html("("+(parseInt((curBytes / totalBytes) * 100) + "%")+")"); } } } //上传过程中出错 function uploadError(file, errCode, msg) { openfujian--; } //上传成功 function uploadSuccess(file, data) { var name = file.name; var size = file.size; var type = file.type; var id = file.id; var filestatus = file.filestatus; var dataid = data; if (fileid == 0) { $("#bbsfiles").append("已上传附件:"); } if (name.length <= 18) { name = name.substr(0, 18); } else { name = name.substr(0, 15) + '...'; } if (size > 1024 * 1024) { size = (((size / 1024 / 1024).toFixed(2))) + 'MB'; } else { size = (Math.round(size / 1024)) + 'KB'; } //操作 fileid++; //alert(file,data); } //上传完成,无论上传过程中出错还是上传成功,都会触发该事件,并且在那两个事件后被触发 function uploadComplete(file) { openfujian--; if (openfujian <= 0) { this.setButtonDisabled(false);//恢复上传按钮 hideDiv('messagebox_win'); } this.startUpload();//开始上传 } function cancelUploads(id) { aswfu.cancelUpload(id); } var aswfuOption = {//swfupload选项 upload_url: "http://www.huhangfei.com.cn/bbsupload/fileupasp2015.asp?CookieID=@CookieID&swfupuser=@userinfo.UserName", //接收上传的服务端url flash_url: "http://bbs.huhangfei.com.cn/images/swfupload2015215.swf",//swfupload压缩包解压后swfupload.swf的url button_placeholder_id: "fl",//上传按钮占位符的id file_size_limit: "20MB",//用户可以选择的文件大小,有效的单位有B、KB、MB、GB,若无单位默认为KB prevent_swf_caching:false, button_ 89, //按钮宽度 button_height: 34, //按钮高度 button_text: '',//按钮文字 button_text_style: '',//按钮文字样式 button_text_top_padding: 6,//文字距按钮顶部距离 button_text_left_padding: 65,//文字距离按钮左边距离 button_image_url: "",//"http://simg.huhangfei.com.cn/bbs/revision/images/fj.jpg",//按钮背景 button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT, //debug: true,//开启调试模式 file_dialog_complete_handler: fileDialogComplete,//文件选择对话框关闭 upload_progress_handler: uploadProgress,//文件上传中 upload_error_handler: uploadError,//文件上传出错 upload_success_handler: uploadSuccess,//文件上传成功 upload_complete_handler: uploadComplete,//文件上传完成,在upload_error_handler或者upload_success_handler之后触发 //这个地方在windows上有个bug,官方如是说:在window平台下,那么服务端的处理程序在处理完文件存储以后,必须返回一个非空值,否则此事件不会被触发,随后的uploadComplete事件也无法执行。 //post_params: { "CookieID": "@CookieID", "swfupuser": "@userinfo.UserName" }, file_types: "*.doc;*.docx;*.txt;*.zip;*.rar;*.caj;*.pdf;*.vip;", file_types_description: "['doc','docx','txt','zip','rar','caj','pdf','vip']" } var aswfu = new SWFUpload(aswfuOption); function DeleteFujian(id) { $("#fujian" + id).remove(); BBsPost.deleteFujian(id); fileid--; if (fileid == 0) { $("#bbsfiles").html(""); } } </script>