input change事件获取文件名和文件类型

最新推荐文章于 2023-05-22 19:36:02 发布
最新推荐文章于 2023-05-22 19:36:02 发布
阅读量4.2k 收藏
点赞数
分类专栏： 原生JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joyvonlee/article/details/102917092
版权 
<input type="file" onchange="changeMethod(this)">

function changeMethod(e) {
  let file = e.files[0]
  console.log(file)
  let type = file.type    // 获取到文件类型
  let name = file.name    // 获取到文件名
}

 

使用input读取文件
wd
07-15 1801
读取一个包含文本内容的文件，代码如下： Document #fileOutput{ width: 400px; height: 300px; border:1px solid red; } function processFiles(files){ // 得到第一个文件 var file = files[0];
原生JS上传文件，获取文件二进制数据及文件大小和文件名称
07-07
例如，你可以使用`FormData`对象来收集多个文件和其他表单数据，然后通过`fetch`或`XMLHttpRequest`发送到服务器。如果需要在上传前对文件进行预览，可以使用`readAsDataURL`方法读取文件为DataURL。 总之，原生...
input type="file" 的onchange事件
热门推荐
newnazi的专栏
03-05 1万+
onclick="return FileUpload_onclick()" onchange="return FileUpload_onselect()"/>                function FileUpload_onselect()         {             var path;             path=document.forms[0].
Dynamics CRM Form表单中通过javascript抓取触发change事件字段的属性名
weixin_33724570的博客
06-20 185
通过下面这段代码可以抓取到change的事件源，从而判断出是哪个属性字段触发的事件， function change(pContext) {var fieldName=pContext.getEventSource().getName(); } 在字段的事件设置中需要将下框中复选框的勾勾上，更多的信息可参见SDK。 ...
input file样式修改的同时获取文件名
github_38696818的博客
06-19 1682
应为项目当中上传文件中有需要input file这个属性，但是浏览器自带样式真的太丑了，还不统一，所以找了一些其他的进行参考，结果很失望啊，也许是问题太简单了。进入正题；html <p class="shofs">点击这里上传文件</p> <input type="file" name="" multiple="multiple" id="fil">我把p标签放在input的
vue给input file绑定函数获取当前上传的对象
weixin_34144848的博客
12-15 1613
HTML &lt;input type="file" @change="tirggerFile($event)"&gt; JS(vue-methods) tirggerFile : function (event) { var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料) // do something...
原生js，jquery, 获取 input file 输入框中的文件信息
业余前端的职业经历
12-22 4323
其实吧 是通过input file文件选择框的一个 change事件 监听回调进行文件的信息的获取的 原生js是 var file = document.querySelector('input[type=file]'); file.addEventListener('change', function() { console.log(this.files); }) jquer 则是 其实 上面的也可以在 jquery 中使用 $('input[type=file]').cha...
jquery获取file表单选择文件的路径、名字、大小、类型
12-29
一、问题 在使用file表单时想知道选择的文件的路径、名字、大小、类型？ 二、知识点 1.input表单会触发...5.文件类型 e.currentTarget.files[0].type 三、测试代码 <body> 未选择 <input type=file cl
解决vue项目中type=”file“ change事件只执行一次的问题
08-27
这是因为 input[type="file"] 元素的 change 事件只会在文件选择改变时触发，而不是在文件上传完成时触发。 在 Vue 项目中，我们可以使用 v-if 指令来解决这个问题。我们可以添加一个小的开关 ishowFile，将 input...
将input file的选择的文件清空的两种解决方案
09-04
在网页表单中，`<input type=...总的来说，清空`<input type="file">`元素选择的文件可以通过多种技术实现，但考虑到浏览器的差异性，推荐使用事件监听和直接修改`value`属性的方式，以确保在各种环境下都能正常工作。
input type="file"获取文件名方法
已被格式化的叔叔
09-24 1万+
传统文件上传比较丑，样式调整时会有一个获取文件名，或者包含文件路径的文件名的方法 <div class="file-box"> <form id="uploadForm"> <input type="text" id="textfield" class="txt" /> <input type="...
如何获取通过 input[type=file] 标签上传的文件
最新发布
kiligcoding的博客
05-22 3615
方法，该方法接收一个事件参数，其中包含上传的文件信息。属性获取上传的文件数组，然后对数组进行处理。2. 在 Vue 实例中定义。1. 在模板中创建一个。
<input type="file">设置的onchange只能执行一次的解决方案
日拱一卒，功不唐捐
02-27 7503
<input type="file">设置的onchange只能执行一次的解决方案
html type file 响应,把input type=file 上传文件的onchange调用方法参数用\"括起来后赋给div变乱而无响应...
weixin_42301413的博客
06-23 1277
用 input type=file 来上传文件需要借住 javascript 来完成，客户端的执行过程大概是这样：用户单击“浏览”选择待上传的文件后触发 input 的onchange事件，在onchange事件中调用一个方法，该方法负责把文件提交到服务器，由服务器来完成文件的上传。这种方法上传文件每上传一次后需要重写 input type=file，这就涉及到把 input type=file ...
input:file onchange事件无法读取解决方法
ajfiogn01745的博客
04-25 569
最近做项目，移动端的多文件上传，使用input:file读取文件 <input type='file' name='file' multiple accept='image/*' capture='camera'> 但是在移动端 设置 multiple 属性是不起作用的，设置此属性PC端可以多选而移动端无法多选。 我使用的解决方案是动态添加 input:file...
前端实现选择文件夹功能 并获取文件夹名 input webkitdirectory
吉法师的博客
04-12 1万+
我们都知道input标签type="file"的时候，会打开一个文件选择器，但并不支持选择目录。 如果要支持选择目录，且必须只是目录的话，用下列的代码： <input type='file' @change="triggerFile($event)" webkitdirectory> change绑定了一个函数，函数的内容为: triggerFile(event) { let file = event.target.files; console...
angular中关于change获取input type=“file”的文件内容
wh2271222402的博客
08-24 1869
在使用angular时，想要使用<input type="file"/>来选择本地文件，并获取文件的内容，比如名字、大小等。这时候就需要在input中添加change事件来监听input的变化，具体如下： app.component.html： <inputtype="file"class="file"(change)=getFile($event)/> app.component.ts: publicname:any='';//保存文件名 p...
vue-输入框change事件并获取值
axf79537的博客
04-03 7660
1.html <input type="text" @change="specifiName($event)" />//输入框的change事件 <input type="text" @input="specifiName($event)" />//输入框的输入事件 <input type="text" @keyup.enter="specifiN...
html input监听事件无效,html input的file文件输入框onchange事件触发一次失效解决方法...
weixin_36307377的博客
06-03 1058
最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~于是想办法解决它~在网上找了一些资料，找到这几种方法：1、替换掉原来的input框2、remove原来的input框，然后在添加进新的一样的input框我测试了之后发现可以用下面的方法解决这个问题：第一步：上传完成后替换掉原来的input框第二步：重新绑...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值