当前位置:Gxl网 > 互联网 > 上传文件控件

上传文件控件

时间:2021-07-01 10:21:17 帮助过:4人阅读

我们在编写页面的时候会遇到这样的情况,需要上传文件。我们一般会使用来处理。

但是他会有一个小问题。下面我们一起来看一看。

不同浏览器下式样差别较大。

  IE8:在按钮前面有一个文本框用来显示文件路径。

gxlsystem.com,布布扣

  chrome:在按钮后面显示文件上传状态。默认文言略有不同。

gxlsystem.com,布布扣

  Firefox:与chrome相似。

gxlsystem.com,布布扣

  不同浏览器下的式样不同,导致我们不能基于一个稳定的式样做设置,当我们设置width和height也会遮盖不同的部分。

解决方案1:隐藏,在原处放一个按钮,在按钮的click事件中手动触发的click事件。

解决方案2:先做一个假的按钮的放在底下下,将的宽高与假按钮相同、透明度设置为0,并通过绝对布局定位到假按钮的位置。这样看到的是按假钮,点击的是盖在上面的

接下来我们来分别看看这两个方案:

HTML:

 

方案1:隐藏,在原处放一个按钮,在按钮的click事件中手动触发的click事件。

CSS:

.inputBox{
  width:500px;
  height:500px;       
}

.btnInput{
  display:block;
  width:100px;
  height:30px;
  /*按钮相关式样*/  
}

.fileInput{
  display:none; 
}

  js,手动事件传递

1 $(‘.btnInput‘).click(function(){ 
2     $(‘.fileInput‘).trigger("click"); 
3 });

这时我们运行代码,发现当点击button时,确实弹出了文件选择器窗口。

我们通常会在的onchange中做表单的验证和提交。

但是这样做会有一个问题出现:IE下不一定会接到onchange事件。下面我们来试一下:

添加以下的js代码

1 $(‘body‘).on("change", ‘.fileInput‘, function(){
2    alert("change event");        
3 });

当我们初次传文件,或是改变了文件时在chrome下还没有问题,但是在IE 8 下就没有触发onchange事件。

我们改变以下结构

window.fchange = function(){
    alert("change event"); 
}

标签中的onchange会在window下找函数,如果你的事件处理函数不在window下,那么你需要绑一下。这样做会弹出提示框,但是如果函数体中引用了大量的子作用域变量,函数又绑在window下,内存释放也会有问题。所以我们尽量不要用这个方法。

但是我们要明白为什么IE下接不到事件,因为IE下的有些版本认为onchange要在有焦点离开才能触发,我们手动转的事件焦点一直在button上。所以我们为求保险,要让input被点击。 

 

方案2:先做一个假的按钮的放在底下下,并通过绝对布局定位到假按钮的位置。这样看到的是按假钮,点击的是盖在上面的

 1 .inputBox{
 2   position: relative; 
 3 }
 4 
 5 .btnInput{
 6    /*按钮式样*/
 7 }
 8 
 9 .fileInput{
10   position: absolute;
11   /*与按钮同高同宽*/
12   opacity: 0;
13   filter:alpha(opacity=0);   //IE
14    /*top left 调整到按钮位置或用JS算*/
z-index:高一点
15 }

这样就没有问题了。

 

 

  

 

上传文件控件,布布扣,bubuko.com