87,921
社区成员
发帖
与我相关
我的任务
分享IE 上传文件 display=none 服务器端取不到文件，click 的 file 对象在提交表单前会被清空
IE 上传文件 display=none 服务器端取不到文件，click 的 file 对象在提交表单前会被清空，GOOGLE和火狐都可以正常，服务器端取不到文件，我检查了JS，原来是INPUT=FILE对象被清空了。请问有什么好的解决办法吗？要隐藏input=file 这个对象，因为要做图片预览效果和其他文字说明。
<a href="javascript:;" ondblclick="javascript:loadfile()" title="双击上传/更改照片" runat="server" id="uploadBUTTON">双击上传图片</a>
<input type="file" name="item11" onchange="javascript:getEffect()" style=" display:none" id="item11" />
<script type="text/javascript">
function loadfile() {
o("item11").click();
}
function getEffect() {
var fileobj = o("item11");
var filepath = "";
//alert(window.navigator.userAgent.toUpperCase());
if (window.ActiveXObject && document.all) {
filepath = fileobj.value;
//fileobj.lang = filepath;
//alert(filepath);
/*
if (navigator.userAgent.indexOf("MSIE 6.0") == -1) {
fileobj.style.display = "block";
fileobj.select();
filepath = document.selection.createRange().text;
fileobj.style.display = "none";
}
else {
alert("not ie6");
}
*/
//fileobj.style.display = "block";
google(filepath);
}
else {
var file = o("item11").files[0];
var reader = new FileReader();
reader.onload = function (e) {
//var pic = document.getElementById("preview");
filepath = e.target.result;
google(filepath);
}
reader.readAsDataURL(file);
/*
var fileobj = o("item8").files[0];
try { //火狐7.0以后
filepath = window.URL.createObjectURL(fileobj);
} catch (e) {
filepath = fileobj.getAsDataURL();
}
*/
}
}
function google(filepath) {
o("uploadBUTTON").innerHTML = "<img src='" + filepath + "' width='812' />";
}
</script>
...全文
请发表友善的回复…
发表回复
步慢生错 2014-08-19
- 打赏
- 举报
单击改双击。。。何必跟自己过不去，实现是可以，不过有什么意义。。同样是把选择文件的按钮隐藏起来，然后另设一个普通按钮，写上双击事件，双击事件触发选择文件按钮的click事件。。
IT丶小青年 2014-08-19
- 打赏
- 举报
补充：如果要双击用这个方式也能实现，需要把file框的显示文件的黑色部分覆盖到那个按钮的区域，之后把file框其余多出的部分用一个遮蔽层覆盖掉，这样就双击按钮时才选择文件。刚刚引差位置啦
IT丶小青年 2014-08-19
- 打赏
- 举报
补充：如果要双击用这个方式也能实现，需要把file框的显示文件的黑色部分覆盖到那个按钮的区域，之后把file框其余多出的部分用一个遮蔽层覆盖掉，这样就双击按钮时才选择文件。
ekingxu 2014-08-18
- 打赏
- 举报
全部HTML
<!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 runat="server">
<title></title>
</head>
<body>
<br />
<br />
<div style="border: solid 1px red; width: 812px; height: 600px" id="rongqi">
<a runat="server" id="uploadBUTTON">双击上传幼儿在幼儿园运动照片（教师上传）</a>
<div style="width: 400px; height: 300px; overflow: hidden; position: absolute; filter: alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5;" id="uploadfilediv11">
<input type="file" name="item11" onclick="return false" onchange="javascript:getEffect()"
style="filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; display: block;
border: solid 1px red; font-size: 10000px;" id="item11" />
</div>
<input type="hidden" runat="server" id="uploadfilehidden" value="" />
<script type="text/javascript">
var fileConfig = new Array("rongqi", "uploadBUTTON", "uploadfilediv11", "item11", "effectImage1", "812", "600");
google(o("uploadfilehidden").value);
function getEffect() {
var fileobj = o(fileConfig[3]);
var filepath = "";
if (window.ActiveXObject && document.all) {
filepath = fileobj.value;
google(filepath);
}
else {
var file = o(fileConfig[3]).files[0];
var reader = new FileReader();
reader.onload = function (e) {
filepath = e.target.result;
google(filepath);
}
reader.readAsDataURL(file);
}
}
function google(filepath) {
var iw = parseInt(fileConfig[6]);
var ih = parseInt(fileConfig[7]);
if (filepath.length > 0) {
o(fileConfig[1]).innerHTML = "<img src='" + filepath + "' id='" + fileConfig[4] + "' style='width:812px' />";
o(fileConfig[4]).onload = function () {
var w2 = iw;
var w = o(fileConfig[4]).width;
var h = o(fileConfig[4]).height;
var h2 = h / w * iw;
o(fileConfig[3]).style.width = w2 + 'px';
o(fileConfig[3]).style.height = h2 + 'px';
o(fileConfig[2]).style.height = h2 + 'px';
o(fileConfig[2]).style.width = w2 + 'px';
var xy = getpos(o(fileConfig[0])).split(",");
o(fileConfig[2]).style.left = xy[0] + "px";
o(fileConfig[2]).style.top = xy[1] + "px";
}
}
else {
var w2 = iw;
var h2 = ih;
o(fileConfig[3]).style.width = iw + 'px';
o(fileConfig[3]).style.height = ih + 'px';
o(fileConfig[2]).style.height = h2 + 'px';
o(fileConfig[2]).style.width = w2 + 'px';
var xy = getpos(o(fileConfig[0])).split(",");
o(fileConfig[2]).style.left = xy[0] + "px";
o(fileConfig[2]).style.top = xy[1] + "px";
}
}
function o(str) {
return document.getElementById(str);
}
function getpos(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var height = e.offsetHeight;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
return l + "," + t;
}
</script>
</div>
</body>
</html>
ekingxu 2014-08-18
- 打赏
- 举报
一个下午就搞了这点东西，现在还差一个双击选择文件了
<div style="border: solid 1px red; width: 812px; height: 600px" id="rongqi">
<a runat="server" id="uploadBUTTON">双击上传幼儿在幼儿园运动照片（教师上传）</a>
<div style="width: 400px; height: 300px; overflow: hidden; position: absolute;filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;" id="uploadfilediv11">
<input type="file" name="item11" onclick="return false" onchange="javascript:getEffect()" style="filter: alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5; display: block; border: solid 1px red; font-size: 10000px;"
id="item11" />
</div>
<input type="hidden" runat="server" id="uploadfilehidden" value="" />
<script type="text/javascript">
var fileConfig = new Array("rongqi", "uploadBUTTON", "uploadfilediv11", "item11", "effectImage1");
google(o("uploadfilehidden").value);
function getEffect() {
var fileobj = o(fileConfig[3]);
var filepath = "";
if (window.ActiveXObject && document.all) {
filepath = fileobj.value;
google(filepath);
}
else {
var file = o(fileConfig[3]).files[0];
var reader = new FileReader();
reader.onload = function (e) {
filepath = e.target.result;
google(filepath);
}
reader.readAsDataURL(file);
}
}
function google(filepath) {
var iw = 812;
var ih = 600;
if (filepath.length > 0) {
o(fileConfig[1]).innerHTML = "<img src='" + filepath + "' id='" + fileConfig[4] + "' style='width:812px' />";
o(fileConfig[4]).onload = function () {
var w2 = iw;
var w = o(fileConfig[4]).width;
var h = o(fileConfig[4]).height;
var h2 = h / w * iw;
o(fileConfig[3]).style.width = w2 + 'px';
o(fileConfig[3]).style.height = h2 + 'px';
o(fileConfig[2]).style.height = h2 + 'px';
o(fileConfig[2]).style.width = w2 + 'px';
var xy = getpos(o(fileConfig[0])).split(",");
o(fileConfig[2]).style.left = xy[0] + "px";
o(fileConfig[2]).style.top = xy[1] + "px";
}
}
else {
var w2 = iw;
var h2 = ih;
o(fileConfig[3]).style.width = iw + 'px';
o(fileConfig[3]).style.height = ih + 'px';
o(fileConfig[2]).style.height = h2 + 'px';
o(fileConfig[2]).style.width = w2 + 'px';
var xy = getpos(o(fileConfig[0])).split(",");
o(fileConfig[2]).style.left = xy[0] + "px";
o(fileConfig[2]).style.top = xy[1] + "px";
}
}
function o(str) {
return document.getElementById(str);
}
function getpos(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var height = e.offsetHeight;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
return l + "," + t;
}
</script>
</div>
ekingxu 2014-08-18
- 打赏
- 举报
恩，我改成这样了，input file 对象好像都是单击就选择文件，能否改成用户双击时才选择文件呢？
步慢生错 2014-08-18
- 打赏
- 举报
想法不错
functionsub 2014-08-18
- 打赏
- 举报
目前要么是用FLASH，要么就是用6L说的办法
input框设置大小后，透明度改为0，覆盖在你上传图片的按钮上。
czt552 2014-08-18
- 打赏
- 举报
楼上正解！css{opacity:0;filter:alpha(opacity=0);}
IT丶小青年 2014-08-18
- 打赏
- 举报
不用display=none，把file框做成透明状之后覆盖到按钮上，效果上点击的是按钮实际上是点击的file框
jenly10 2014-08-18
- 打赏
- 举报
ekingxu 2014-08-18
- 打赏
- 举报
IE input file 一定要鼠标点击，其他委托的CLICK事件没有用，即时委托OBJECT.CLICK选择了文件，在表单提交时input file 对象的VALUE会被清空，啥也没有了，要怎么解决呀
ekingxu 2014-08-18
- 打赏
- 举报
有没有实例可以看下？
业余草 2014-08-18
- 打赏
- 举报
有必要这么麻烦吗，你用其他的插件实现得了。比如jquery
ekingxu 2014-08-18
- 打赏
- 举报
我的JS代码如下：
<a href="javascript:;" ondblclick="javascript:loadfile()" title="双击上传/更改照片" runat="server" id="uploadBUTTON">双击上传幼儿在幼儿园运动照片（教师上传）</a>
<input type="file" name="item11" onchange="javascript:getEffect()" style=" display:none" id="item11" />
<script type="text/javascript">
function loadfile() {
o("item11").click();
}
function getEffect() {
var fileobj = o("item11");
var filepath = "";
//alert(window.navigator.userAgent.toUpperCase());
if (window.ActiveXObject && document.all) {
filepath = fileobj.value;
//fileobj.lang = filepath;
//alert(filepath);
/*
if (navigator.userAgent.indexOf("MSIE 6.0") == -1) {
fileobj.style.display = "block";
fileobj.select();
filepath = document.selection.createRange().text;
fileobj.style.display = "none";
}
else {
alert("not ie6");
}
*/
//fileobj.style.display = "block";
google(filepath);
}
else {
var file = o("item11").files[0];
var reader = new FileReader();
reader.onload = function (e) {
//var pic = document.getElementById("preview");
filepath = e.target.result;
google(filepath);
}
reader.readAsDataURL(file);
/*
var fileobj = o("item8").files[0];
try { //火狐7.0以后
filepath = window.URL.createObjectURL(fileobj);
} catch (e) {
filepath = fileobj.getAsDataURL();
}
*/
}
}
function google(filepath) {
o("uploadBUTTON").innerHTML = "<img src='" + filepath + "' width='812' />";
}
</script>
