input file 文件上传控件隐藏后用button触发它的click事件

[kbryant]

input file 文件上传控件隐藏后用button触发它的click事件为什么文件就上传不上去了，代码


<input type="button" value="test" onclick="f.click()" class="btn_mouseout"/>
<input type="file" id="f" name="f" onchange="doChange(this);" contentEditable="false" accept="text/html" style="disable:none"/>

[愤怒的月光]

2楼应该是正解~~~

[ChDw]

2楼当然不可以算正确。可以像我示例代码那样，设置为透明。这样虽然和隐藏不太一样，但是界面效果是接近的

[打字员]

说实话，这个没有多大意思。。。

如果真想换的话，就这样：

<div class='file'>
	<input type="file" class="file_file" id="file" onchange="setValue()"/>
	<input type='text' class="file_txt" id='file_txt' />
	<div class="file_button"></div>
</div>

  .file{
  width:300px;height:80px;
  position:relative;
  } 
  .file_file{
  width:300px;
  filter:alpha(opacity=0);
  opacity:0;
  position:absolute;left:0px;top:0px;
  z-index:10;
  }
  .file_txt{
  width:240px;height:20px;
  text-align:left;
  border:1px #a8a8a8 solid;
  position:absolute;left:0px;top:0px;
  z-index:1;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  line-height:20px;
  }
  .file_button{
  width:50px;height:22px;
  background:#a8a8a8;
  position:absolute;right:0px;top:0px;
  z-index:1;
  }

不过代价过于大了，在我看来，不如不用

[crazylaa]

还不如自己写个上传控件

[wazdoyang]

妈的 怎么回事啊
昨天回的帖子 今天在我参与的帖子里就找不到
今天这个回的帖子 晚上回家又没了 草你大爷 csdn

[wazdoyang]

[Quote=引用 15 楼 warison2008 的回复:]
都说啦是ie的安全性限制，没人相信？
做样式哪个都可以做出来
关键是你提交当前form的时候，必然出现“拒绝访问的错误”。
所以楼上的，样式写的再好也是没法子
楼主需要实现的是，能修改file的样式，又能提交当前页面
，这样的方式，目前我在网上没看见过
file的样式难看就难看啦，我们好几个项目都没解决这个问题
哪个高手有更好的解决方式请贴出来，
不过别再贴样式的解决方法啦，没意思
关键是修改后能否成功的上传文件
[/Quote]


IE下 可以調用file控件的 click 事件 彈出選擇框 並可以成功上傳，只是在火狐下 才不會起效

[zhizunyue]

[星尘物语]

引用 22 楼 yjfjebj789 的回复:

确实， 以前也因为这个郁闷了半天， 后来才知道是IE的安全限制了

然后上网查了些资料,也像楼上那样（设file透明，然后动态生成，改变坐标），  便可实现单按钮多附件上传了(跟163一样)

163 可以多选呢。怎么弄啊？

[lijing0511]

看了半天，还是搞不明白

[cloudgamer]

1.指定用一个容器。
容器最好指定高和宽，并且overflow为hidden，不是块级元素的最好设display为block（为了高和宽的正确呈现）；
2.在容器里放一个file控件，并设置样式，使能触发弹出选择文件框的部分覆盖整个容器，并设置成全透明。
容器指定准确的高和宽就是为了能通过file控件中不多的能设置的样式来覆盖整个容器；
3.现在已经把容器模拟成file控件了，可以直接设置容器的样式来模拟设置file控件的样式了。

具体参考这里的file样式部分

[kuaiman1]

绝对要顶

[shubangjun]

先试下~~

[Isnotsuitable]

研究下,应该还挺不错的

[tcx814616]

如何解决各浏览器的兼容问题？

[luyillll]

试一试

[yo010yo]

遇到同样的问题了，看看高手怎么解决的

[fengshangyue]

//js代码
function touchOffUpload(){
$('#Filedata').click();
return false;
}

//html代码
<a href="javascript:;" onclick="touchOffUpload()" id="upload_button">上传</a>
<input class="file" id="t_file"" type="file" name="Filedata" id="Filedata" />

[ILAww]

我遇到了同样的问题，想把上面的input type="file"的mouseover事件转移到下边的虚拟按钮上，不知道怎么弄，看看前辈的代码

[zqqlj2004]

我是来看17楼的！

[liuguowei07]

17楼的方法，FireFox怎么实现？
style.posTop和style.posLeft在FireFox里没有