多数浏览器都支持FormData,但是IE10以下的浏览器却显示FormData未定义
使用 FormData 的最大优点就是可以异步上传二进制文件
然而本篇文章我所演示到的,是使用Flash来兼容我们的IE6/7/8/9
这也是近期一次项目中用了比较好用的开源:信乎OA系统,此系统中上传附件的功能就是使用了FormData。
直奔主题,如何兼容IE6/7/8/9,这里笔者曾经用织梦的时候系统中自带有SWFUpload上传插件感觉挺好用的
于是研究了一下SWFUpload,SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大。最重要的是也是二进制上传文件。也是巧了
具体思路就是如果用户用的浏览器支持FormData,那就原有的不便,如果不支持FormData,那么前端的上传代码改一下使用SWFUpload
信乎OA使用的FormData也是二进制上传,SWFUpload使用的也是二进制上传,那么后台的处理程序,我们就不用再重写了。只需要把前台上传的方式方法写好就行了
js/js.js文件中js.upload增加了一段if(typeof(FormData)=='undefined')如果浏览器不支持FormData将使用swf的上传地址
if(typeof(FormData)=='undefined'){
var url = 'index.php?m=allupload&d=public&callback='+call+'&upkey='+js.uploadrand+'';
}
allupload这个是自己添加的,需要建立对应的目录和文件,下图是用IE9测试的截图。IE6、7、8也测试了,成功
下面是tpl_allupload.html文件的代码,其实代码根据需求来修改的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<link href="swfupload/swfupload.css" rel="stylesheet" type="text/css" />
<title><?=$da['title']?></title>
<script language="javascript">
window.onload = function ()
{
swfu = new SWFUpload(
{
// Backend Settings swfupload/swfupload.php
upload_url: "index.php?a=upfile&m=allupload&d=public&maxsize=8&uptype=*&thumbnail=&ajaxbool=true&rnd=115961",
file_post_name:"file",
post_params: {},
// File Upload Settings
file_size_limit : "200 MB", // 2MB
file_types : "*.*",
file_types_description : "选择要上传的文件",
file_upload_limit : "0",
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
button_disabled : false,
//
button_placeholder_id : "spanButtonPlaceholder",
button_width: 86,
button_height: 29,
button_image_url : "swfupload/images/add.png",
button_text_top_padding: 0,
button_text_left_padding: 10,
button_text_right_padding: 10,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
moi:1,
wcarr:[],
// Flash Settings
flash_url : "/swfupload/swfupload.swf",
custom_settings : {
upload_target : "upfile"
},
// Debug Settings
debug: false
});
};
var up={
okla:function(){
var showid = '<?=$params["showid"]?>';
if(showid!=''){
try{parent.js.downupshow(swfu.settings.wcarr, showid);}catch(e){}
try{opener.js.downupshow(swfu.settings.wcarr, showid);}catch(e){}
}
this.closeaa();
},
closeaa:function(){
window.close();
try{parent.js.tanclose('uploadwin')}catch(e){}
}
}
</script>
<script type="text/javascript" src="swfupload/handlers.js"></script>
<style type="text/css">
.alert{ padding:1px 5px; border:1px #996 solid; background-color:#ffffff; color:#933}
*{ font-size:14px;}
.mdiv{ border-bottom:1px #cccccc solid; height:22px; overflow:hidden}
.mdiv div{ float:left; height:22px; line-height:22px; overflow:hidden; padding:0px 3px}
.div01{ width:55%;text-align:left;border-right:1px #cccccc solid;}
.div02{ width:15%; text-align:center;border-right:1px #cccccc solid;}
.div03{ width:25%;text-align:left}
#prou{overflow:hidden; background-color:#ffffff; margin:5px 0px; border:1px #666 solid;padding:0px; text-align:left;font-size:12px; position:relative; height:18px;line-height:18px}
#prou span{ left:5px; position:absolute; top:2px}
#proudiv{ position:absolute; left:0px; top:0px; height:18px; overflow:hidden; background-color:#09F;width:0%}
button{ cursor:pointer}
#footmsg{ text-align:left; padding:3px}
.quebntha{position:fixed;right:10px;bottom:10px;}
.webbtn{color:#ffffff;opacity:0.8; background-color:#1389D3; padding:5px 8px; border:none; cursor:pointer;font-size:14px;outline:none;border-radius:5px}
.webbtn:disabled{background-color:#aaaaaa; color:#eeeeee}
.webbtn:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);opacity:1}
</style>
</head>
<body>
<center>
<div style=" position:relative;">
<div align="left" style="padding:3px"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"><button type="button" class="webbtn" id="spanButtonPlaceholder">+上传文件</button> <button type="button" class="webbtn" onClick="up.closeaa()">关闭</button></td>
<td align="right"></td>
</tr>
</table>
<div style="overflow:hidden; height:5px"></div>
<div id="prou" style="display:none"><div id="proudiv"></div><span id="proushow">等待上传...</span></div>
<div class="mdiv" style="background-color:#eeeeee">
<div class="div01">文件名</div>
<div class="div02">大小</div>
<div class="div03">状态</div>
</div>
<div id="upfile">
</div>
<div id="footmsg"></div>
<div class="quebntha"><button type="button" disabled style="padding:5px 15px" class="webbtn" id="quebtn" onClick="up.okla()">确定</button></div>
<div style="clear:both; width:100%; height:0px;"></div>
</div>
</center>
<div class="up_img_dis" style=" display:none;position:absolute;width:56px; height:56px;clear:both; left:197px; top:60px;opacity:10;filter:alpha(opacity=100);"><div style=" border:2px solid #666;"><img src="swfupload/images/01.gif" style="border:10px solid #fff;" /></div>上传中...</div>
</body>
</html>