如何去掉input type=file中的选择文件

使用input type=file时，发现总是有个默认的选择文件，如图所示：

对其进行样式修改发现，其默认的样式就是这样，并不能通过css样式进行修改。既然修改不了，我们为什么不换另一种思路对其进行解决？这里我们通过position：absolute绝对定位对其进行解决，思路是通过一个div绝对定位，位于input上方，通过对div的点击，进而监听触发input事件，从而解决去掉选择文件（这里其实是隐藏，设置visibility：hidden）。
直接上代码：

<!-- 中心上传按钮@click='batchUpload' --><input type="file" id="batchUpload" name="files"accept="image/jpg, image/gif,image/png, image/jpeg"multiple="multiple"><div @click="centerUploadBox" class="centerUploadBox"><p class="centerUpload">批量上传</p></div>
<style>/* 中心上传input */#batchUpload {width: 60px;height: 20px;position: absolute;top: 50%;left: 50%;margin-left: -30px;margin-top: -10px;}
.centerUploadBox {cursor: pointer;background: url('../../static/centerUpload.png') no-repeat;width: 110px;height: 110px;position: absolute;top: 50%;left: 50%;margin-left: -55px;margin-top: -55px;text-align: center;}
</style>

     // 批量上传//通过点击div，对input进行绑定change事件，进而点击div盒子时，可以触发inputcenterUploadBox() {var me = this;var batchUpload = document.querySelector('#batchUpload');         batchUpload.click();var filesList = document.querySelector('#batchUpload').files;batchUpload.addEventListener('change', function () {            var filesList = document.querySelector('#batchUpload').files;if(filesList.length==0){                  return;}else{  }})}

综上所述，对input样式修改不了，我们可以通过另外一种思路去解决问题，通过绝对定位，点击位于input上方的div，进一步绑定input，从而触发change事件，从而解决上述问题，如图所示：

如何去掉input type=file中的选择文件相关推荐

AngularJS 双向绑定 input type='file'中文件名，文件内容
通过ng-model获取文件名,文件内容无效,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空 <div ng-controller="getFileCtr ...
input[type=file] 异步上传文件
背景 UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片. 拍照上传部分的代码如下 html部分 <div class="take-photo"& ...
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式
限制文件格式一.示例标签1: <input type="file" accept="image/*" /> accept属性说明: image表 ...
JQuery------获取input type=file中的文件内容
html <div class="File">添加附件</div><input id="upfile" name="up ...
解决利用＜input type=“file“＞上传文件时，value拿到的是fakePath问题
问题:上传文件之后,直接获取input.value是fakePath路径,因此不能通过此路径访问到文件解决方案: 若不想修改系统配置,可利用js代码解决 oInputFile.onchange = ...
html input type=file
一. input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: <input type=file&g ...
js/jquery 获取本地文件的文件路劲获取input框中type=‘file’ 中的文件路径(转载)...
原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲获取input框中type=' ...
HTML，input type=“file“获取文件名、文件大小、文件类型
HTML代码 <input type="file" id="deviceFile"> 获取文件名.文件大小.文件类型 $('#deviceFile' ...
在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果
通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上 ...
input[type=file]去掉“未选择任何文件”及样式改进
原文地址:input[type=file]去掉"未选择任何文件"及样式改进 - 腾讯云开发者社区-腾讯云 input 标签的 file 属性,在没有选择文件的情况下,默认显示一条文 ...

如何去掉input type=file中的选择文件

如何去掉input type=file中的选择文件相关推荐

最新文章

热门文章