文档提交input file简单清理计划方案(css)

日期:2021-03-10 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

文档提交input在各个访问器里主要表现方式都不1样:

ie6

 

ie7,8,9

ff

chrome

这里详细介绍1种简易好用的,在各种各样访问器下主要表现1致的清理方式,实际效果以下:

ie6没法清理,只能运用一部分实际效果,以下:

挑选文档后(以ff为例,无需访问器显示信息的相对路径不一样):

html编码:

拷贝编码
编码以下:

  <form id="UploadForm" method="post" enctype="multipart/form-data">
    <div class="file-uploader-wrap">
      <input type="file" class="file-uploader" name="uploadDataField" id="FileUploader"/>
      <div class="file-uploader-wrap-fake">
        <input type="text" id="PathDisplayer" class="input-text" disabled />
        <a href="javascript:void(0)" class="link-btn" >挑选文档</a>
      </div>
    </div>
  </form>

css编码:

拷贝编码
编码以下:

body{
font-size: 12px;
text-align: left;
}
.input-text{
height: 23px;
width: 315px;
line-height: 23px;
vertical-align: middle;
background: #FAFBFD;
border:1px solid #d4d4d4;
}
.link-btn{
width: 78px;
height: 25px;
display: inline-block;
line-height: 25px;
text-align: center;
vertical-align: middle;
background: url('./images/btn.png') 0 ⑴10px;
color: #6d767f;
text-decoration: none;
}
.file-uploader-wrap{
position: relative;
width: 405px;
height: 27px;
margin-top: 20px;
}
.file-uploader-wrap-fake{
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 27px;
_display : none;
}
.file-uploader-wrap .file-uploader{
position: relative;
width: 400px;
height: 27px;
text-align: right;
filter : alpha(opacity = 0);
opacity: 0;
z-index: 2;
cursor: pointer;
_filter : none;
_text-align : left;
_line-height : 27px;
}

js编码:

拷贝编码
编码以下:

window.onload = function(){
var fileUploader = document.getElementById('FileUploader');
var pathDisplayer = document.getElementById('PathDisplayer');
if(fileUploader.addEventListener){
fileUploader.addEventListener('change', fileUploaderChangeHandler, false);
}else if(fileUploader.attachEvent){
fileUploader.attachEvent('onclick', fileUploaderClickHandler);
}else{
fileUploader.onchange = fileUploaderChangeHandler;
}
function fileUploaderChangeHandler(){
pathDisplayer.value = fileUploader.value;
}
function fileUploaderClickHandler(){
setTimeout(function(){
fileUploaderChangeHandler();
}, 0);
}
}

在款式层面,选用的是将提交input设定为全透明,而且置于文字框和挑选文档按钮之上的方式。

.file-uploader中的text-align:right款式是以便将file input置于右侧,从而使点一下挑选文档按钮时能够点一下到file input。

js关键功效是挑选文档后将相对路径显示信息在文字框中。

    ie7,8只适用file input的click恶性事件,在点一下file input时开启,随后运用ie7,8选中择文档会话框出現时会阻断setTimeout的基本原理,在挑选文档后获得file input的值。因为ie6汉语件挑选会话框其实不能阻断setTimeout,没法在挑选文档后立即获得到文档相对路径,因此没法对ie6开展清理。ie9既适用click恶性事件,也适用change恶性事件。ff和chrome只适用change恶性事件,change恶性事件在文档挑选以后开启。

挑选文档后,便可以开展同歩或多线程的文档提交了。

上一篇:css3.0 图型组成案例训练1 返回下一篇:没有了