用jquery ajaxSubmit插件写了个无刷新上传图片的脚本,火狐和谷歌下可以但是IE下就有问题,找了半天也没找到解决方法。
但是如果把“uimg”不隐藏,直接点这个文件浏览选择图片上传在各个浏览器下都没问题。
测试地址:http://www.weddingdress-oem.com/mn/test.php
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate,no-store"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <META HTTP-EQUIV="expires" CONTENT="0"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>发布商品</title> <script type="text/javascript" src="http://www.weddingdress-oem.com/mn/js/jquery.js"></script> <script type="text/javascript" src="http://www.weddingdress-oem.com/mn/js/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function(vv){ //图片上传 $("#maolian").click(function(){ $("#uimg").click(); }); $("#uimg").change(function(){ var v = ($("#uimg").val()); if ($("#uimg").val()){ alert(v); $("#upimgform").ajaxSubmit({ //dataType:'script', type:'post', url: "upaimg.php", beforeSubmit: function(){ $("#maolian").html("图片上传中..."); //$("#yulan").html(""); }, success: function(data){ $("#maolian").html("上传图片"); $("#yulan").append(data); }, resetForm: false, clearForm: false }); //$("#upimgform").submit(); } }); }); </script> </head> <body> <form id="upimgform" method="post" enctype="multipart/form-data" action="upaimg.php"> 上传图片:<br /><br /><a href="#" id="maolian" name="maolian">本地上传</a><br /><br /> <input name="uimg" id="uimg" type="file" style="display:none" /> </form> <div id="yulan"></div> </body> </html>
------解决方案--------------------
$("#maolian").click(function(){
$("#uimg").click();
});
这样触发file的click事件在不同浏览器,不同版本下触发不了选择文件的。
兼容行最好的就是见file设置为透明的,position为absolute,然后将file浮动在连接上面,这样点击链接实际点击的是file控件
参考:模仿163的邮箱的文件选择上传