input file提交文档款式适用html5的访问器处理计划

日期:2021-02-26 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

近期在应用画布解决图象像素时用到了file提交控制,发现了file提交控制的两个适配性难题。1个是file提交控制在火狐下没法根据css更改width,另外一个是file提交控制在不一样的访问器下的外型和个人行为都不1样。
下面是file提交控制在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图:

 
在IE10里,双击鼠标键入框或点击按钮都弹出文档挑选框。在别的访问器里点击键入框,按钮或文本都可以以开启文档挑选框。
鉴于这类错乱状况,必须要统1款式和个人行为。下面是我的适配性计划方案。
先看1下最后結果在各访问器的截图:


基础思路:建立键入框和按钮仿真模拟file提交控制。将file提交控制设定成全透明。让file提交控制与用于仿真模拟的按钮右对齐。改动元素的层叠次序,让按钮处在下面,file提交控制在正中间,键入框在上面。在文档挑选结束后将file提交控制里的值赋给用于仿真模拟的键入框。
基本原理:在不一样的访问器里,file提交控制的按钮的height全是可调的,并且file提交控制的右边全是能够点击的。因此根据调整file提交控制的height,并调剂file提交控制的部位(右对齐),可让file提交控制的可点击地区与用于仿真模拟的按钮彻底遮盖。当file提交控制全透明时客户点击用于仿真模拟的按钮就开启了文档挑选框。但另外file提交控制的层叠次序不可以先于用于仿真模拟的键入框,要不然当客户将电脑鼠标置于所见的键入框上时将会会看到光标并不是标示文字而是为1个箭头(并且为1个箭头时点击会弹出文档挑选框),客户将觉得疑惑。
完成:先看看html一部分的编码。

拷贝编码
编码以下:

<div id="file">
<input type="text" value="未挑选文档" /><input type="button" value="访问" /><input type="file" />
</div>

随后是css一部分的编码。

拷贝编码
编码以下:

#file {
position:relative;
width:226px;
height:25px;
border:1px #99f solid;
}
#file input {
font-size:16px;
margin:0;
padding:0;
position:relative;
vertical-align:middle;
outline:none;
}
#file input[type="text"] {
border:3px none;
width:172px;
z-index:4;
}
#file input[type="button"] {
width:54px;
height:25px;
z-index:2;
}
#file input[type="file"] {
position:absolute;
right:0px;
height:25px;
opacity:0;
z-index:3;
}

最终javascript一部分,用于把file提交控制得到的文档相对路径显示信息到可见的键入框里。

拷贝编码
编码以下:

window.onload=function(){
var file=document.querySelector("#file input[type='file']");
var text=document.querySelector("#file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}
}

欢迎留言沟通交流或纠正。