问题描述
在开发的时候,遇到了需要提交表单文件的需求,但是原生<input>
标签特别不好看,而且还有点击提交文件的提示,这样很影响美观,于是便想着更改<input>
为<button>
按钮。
解决方案
- 建立一个button按钮,在其上面覆盖表单框,且设置表单的透明度为0,这样虽然用户看到的是button,但是点击的确实
- 将隐藏,当点击button的时候,去触发的点击,用户点击的是button,但是触发的是input的事件。
实现方案
- 设置input透明度为0的方法
<input class="file" accept="image/*" name="file" type="file">
<input class="btn" id="submit" value="点击拍照上传" type="button">
对应的css样式
.file {width: 150px;height: 50px;position: absolute;top: 50px;left: 30%;z-index: 1;opacity: 0;
}
.btn {width: 150px;height: 50px;font-size: 16px;color: #fff;background: #28abde;border-radius: 5px;position: absolute;top: 50px;left: 30%;
}
这种方法是加了一层看不见的input,用户看到的是button,但是点击的却是input,在网站攻击的时候也可能会用到这种方法,当用户误以为点击了底层的元素,但是实际上点击的顶层看不见的元素,导致泄密。
- 设置input不可见,并由button去触发。
<form name="form1"><input type="file" name="picpath" id="picpath" style="display:none;" onChange="document.form1.path.value=this.value"><input type="button" value="上传文件" onclick="document.form1.picpath.click()">
</form>
当用户点击button按钮的时候会触发click事件,当文件域的值改变时同时修改对应表单内的值。