使用elementui美化原生input file

最新推荐文章于 2024-06-05 18:26:42 发布
最新推荐文章于 2024-06-05 18:26:42 发布
阅读量1.2k 收藏
点赞数
分类专栏： elementui 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_36583119/article/details/121375136
版权

参考：

（1）input file上传文件样式美化：input file上传文件样式美化_zuo_zuo_blog的博客-CSDN博客 

我：

（1）先隐藏原生input file，再使用elementui的组件去触发原生input file

<div>
     <el-input size="mini"v-model="name1" disabled>
         <template slot="prepend">
             <el-button 
                v-if="name1==='未选择文件'" 
                type="primary" size="mini" 
                @click="$refs.file1.click()">
                   选择文件
             </el-button>
             <el-button 
                v-else 
                type="danger" size="mini" 
                @click="clear()">
最低0.47元/天 解锁文章
我叫吴桂鑫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
美化file input
08-07
在CSS方面，由于file input的样式很难直接控制，我们通常会采用“隐藏原生input，创建自定义按钮”的方法。例如： ```css #customFileInput { display: none; } #customFileInput + label { background-color: #...
elementui与input[type="file"]文件上传
weixin_41166682的博客
12-25 1万+
1.elementui文件上传组件 template中 <el-upload :http-request="uploadFile" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" ref="upload" :data="formData" limit="4" ...
【实现el-input上传的Execl文件读取】
weixin_43866250的博客
08-31 545
const0;// 检查文件类型为<input type="file">时是否是Excel文件if===||===// 处理Excel文件this;elsealert'请选择一个Excel文件！;// 获取第一个工作表const0;// 将工作表转换为JSON对象constXLSX;
Element-UI 样式修改合集
最新发布
glutinous_Rice的博客
06-05 187
【代码】Element-UI 表格表头设置背景色及居中设置。
修改input元素的file样式
Tayshin的博客
06-25 1181
HTML里的input[type=file]和select太傻了。 input file本身是一个控件 ，不能直接写按钮的属性。 但是也有解决方案，就是单独写一个input text和input button，之后覆盖上一个input file，input的位置大小设置成覆盖输入框和按钮的位置大小，最后把两个输入的value绑定即可。 浏览 上传 这里我用的是e
使用element-ui按钮替换input type=“file“ 默认按钮
zouyi_888的博客
07-27 2881
问题 在某些情况下element的Upload上传组件并不适用，而HTML的input标签按钮样式又不好看。所以希望用element-ui按钮替换input type=“file” 默认按钮。 解决办法 先隐藏input的默认按钮，再把el-button的点击事件指向input的点击事件。代码如下： <form name="form1"> <input type="file" id="uploads" :value="imgFile"
input file实现多选和限制文件上传类型
热门推荐
lwj734114646的专栏
10-24 2万+
<!-- accept 并未真正的实现限制上传文件类型，只是在选文件的时候有限制， 如果选文件的时候手动修改上传文件的类型，还是可以上传其他文件的。 因此，要实现只上传accept属性指定的文件类型，还必修结合js来实现--> //取出上传文件格式的后缀名 var fileAccept = $("#id").val().split(".")[1];//获取上传文件的
vue input file 上传图片
fly_666的博客
05-22 4242
原始图 父组件： <div class="my-basic"> <my-basic :items="category[3].menu[0]" @uploadHeadImg="uploadHeadImg" @handleFile="handleFile"></my-basic> </...
elementui 2.15.7 离线使用文档
07-06
如按钮（Button）、输入框（Input）、选择器（Select）、表格（Table）、下拉菜单（Dropdown）、轮播图（Carousel）、对话框（Dialog）、提示信息（Message）等，这些都是前端开发中最常见的元素，ElementUI提供了...
android webview input=file 失效解决方案
05-24
然而，在使用Webview时，有时会遇到一个问题：当HTML页面中包含`<input type="file">`用于上传文件的表单元素时，这个功能在Webview中可能无法正常工作。这通常是因为Android的安全策略限制了Webview对本地文件系统...
原生js input表单城市选择器代码
06-21
本文将详细解析如何使用原生JavaScript创建一个功能强大的城市选择器，特别是针对input表单框的实现。 首先，我们需要理解HTML中的`<input>`标签。它是构建表单的基础，用于收集用户的输入数据。在创建城市选择器时...
JS获取input[file]的值并显示在页面的实现方法
10-18
本文将详细解释如何使用 JavaScript 获取 `input[type=file]` 元素的值，并将其显示在页面上。 首先，HTML 中的 `input[type=file]` 元素允许用户从本地文件系统选择文件。基本的 HTML 结构可能如下所示： ```html...
Vue3 点击el-button 触发input type=“file“ 选择本地文件 并修改样式
weixin_45220510的博客
08-05 5040
Vue3 点击el-button 触发input type="file" 选择本地文件 并修改样式。
element 改变input输入框的样式（字体，背景色，图标）
hfyldx的博客
08-24 9012
element 改变input输入框的样式（字体，背景色，图标）
修改文件选择框input type=file的样式
winney07的博客
07-12 3495
文件选择框(input type=“file”)的默认样式跟项目中的样式不是很搭，所以需要修改文件选择框的样式。
vue el-input文件导入 返回文件流怎么办？
henghahouhei的博客
05-30 565
vue el-input文件导入 返回文件流 创建文件 a标签直接下载
Element组件el-input选择图片后预览显示
qq_45415736的博客
06-27 712
Element组件el-input选择图片后预览显示
input文件上传
vfjcgg的博客
04-22 903
<div class="uploadexcel"> <label for="fileInput"> <span class="importBtn">导入</span> <!-- <el-button type="primary">上传文件</el-button> --> </label> <input .
vue 中通过添加原生 input 实现文件上传
web00_11的博客
12-30 4825
文件上传是通过 input 框 且 type = 'file' 来实现的文件上传功能，在页面标签合适位置添加 <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput" /> <!-- 在点
原生js input file文件上传
06-06
好的，以下是一个简单的原生 JavaScript 实现文件上传的示例： HTML 代码： ```html <input type="file" id="inputFile"> <button onclick="uploadFile()">上传文件</button> ``` JavaScript 代码： ```javascript function uploadFile() { // 获取 input 元素 const inputFile = document.getElementById('inputFile'); // 获取文件对象 const file = inputFile.files[0]; // 创建 FormData 对象 const formData = new FormData(); // 将文件对象添加到 FormData 中 formData.append('file', file); // 创建 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); // 设置请求方式和 URL xhr.open('POST', '/upload'); // 发送请求 xhr.send(formData); // 监听请求状态变化事件 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功 console.log(xhr.responseText); } }; } ``` 以上代码实现了文件上传的基本功能，但是并没有处理上传失败、进度条等问题。如果需要更完整的实现，需要参考相关文档进行开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值