jquery ajaxSubmit 无刷新上传图片兼容有关问题
日期：2014-05-16 浏览次数：20634 次
求助：jquery ajaxSubmit 无刷新上传图片兼容问题
用jquery ajaxSubmit插件写了个无刷新上传图片的脚本，火狐和谷歌下可以但是IE下就有问题，找了半天也没找到解决方法。
但是如果把“uimg”不隐藏，直接点这个文件浏览选择图片上传在各个浏览器下都没问题。
测试地址：http://www.weddingdress-oem.com/mn/test.php
------解决方案--------------------
$("#maolian").click(function(){
$("#uimg").click();
});
这样触发file的click事件在不同浏览器，不同版本下触发不了选择文件的。
兼容行最好的就是见file设置为透明的，position为absolute，然后将file浮动在连接上面，这样点击链接实际点击的是file控件
参考：模仿163的邮箱的文件选择上传
用jquery ajaxSubmit插件写了个无刷新上传图片的脚本，火狐和谷歌下可以但是IE下就有问题，找了半天也没找到解决方法。
但是如果把“uimg”不隐藏，直接点这个文件浏览选择图片上传在各个浏览器下都没问题。
测试地址：http://www.weddingdress-oem.com/mn/test.php
<!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的邮箱的文件选择上传
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
