input如何上传文件
1)绑定input[type=‘file’]的change事件
<input @change="uploadPhoto($event)" type="file" class="kyc-passin">
2)利用fileReader对象获取图片或者文件的base64 编码
checkImg (size, type) {
let checkSuccess = true
// 只支持这三种格式的图片
const supportTypeList = ['image/png', 'image/jpg', 'image/jpeg']
// 图片大小不超过5M
const limitSize = 1024 * 1024 * 5 // 5M
if (!supportTypeList.includes(type)) {
this.changeErrorLayerShow(true)
this.dialogInfo = dialogDescList.formatError
checkSuccess = false
}
if (size > limitSize) {
this.changeErrorLayerShow(true)
this.dialogInfo = dialogDescList.sizeTooBig
checkSuccess = false
}
return checkSuccess
},
uploadPhoto (e, id) {
const uploadImgFiles = e.target.files
const curImgFile = uploadImgFiles[0]
const checkSuccess = this.checkImg(curImgFile.size, curImgFile.type)
if (checkSuccess) {
let reader = new FileReader()
reader.readAsDataURL(curImgFile)
reader.onload = (e) => {
this.uploadCard[id] = e.target.result // base64
}
}
// 处理连续选择相同文件,第二次选文件不会触发change事件
e.target.value = ''
}
3)再利用ajax将获取到的图片或文件的编码传给后台即可。
input如何上传文件的更多相关文章
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 使用input file上传文件中onChange事件只触发一次问题
每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- input 原生上传文件(type = file)
1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...
- input file上传文件
如何使用input[type='file']来上传文件呢? html: //angular<input type="file" (change)="fileChan ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- input 限制 上传文件类型
参考:input file控件限制上传文件类型 HTML <input> 标签的 accept 属性 网页上添加一个input file HTML控件: <input id=&quo ...
- input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...
- ASP.NET MVC使用input标签上传文件
有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...
随机推荐
- linux查看硬件、系统信息
查看机器型号等 dmidecode 是一个读取电脑 DMI(桌面管理接口(Desktop Management Interface))表内容并且以人类可读的格式显示系统硬件信息的工具.这个表包含系统硬 ...
- C++->10.3.6.设有两个按升序排列的二进制文件a和b,将他们合并成一个新的升序二进制数据文件file。
#include<iostream.h> #include<stdlib.h> #include<string.h> #include<fstream.h&g ...
- ng-组件
几乎所有前端框架都在玩"组件化",而且最近都不约而同地选择了"标签化"这种思路,Angular 也不例外. 对新版本的 Angular 来说,一切都是围绕着&q ...
- thinkphp5.0将数据指模板中
在控制器中写: public function index(){ $username = \think\Db::table('navigation')->where(array("Vi ...
- PAT (Basic Level) Practice (中文)1064 朋友数 (20 分) (set)
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如 123 和 51 就是朋友数,因为 1+2+3 = 5+1 = 6,而 6 就是它们的朋友证号.给定 ...
- PP: Meta-learning framework with applications to zero-shot time-series forecasting
From: Yoshua Bengio Problem: time series forecasting. Supplementary knowledge: 1. what is meta-learn ...
- 利用GRC进行安全研究和审计 – 将无线电信号转换为数据包(转)
0x00 介绍 InGuardians作为一家从事信息安全研究和咨询的公司,自创立以来不但关注着web应用的渗透测试,网络取证,嵌入式设备等领域也致力于无线网络的评估方法上面的研究.在期间无线网络评估 ...
- C# WPF遮罩对话框(Popup Message Overlay/ Dialog Host)
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- vue必须掌握之组件通信(7种方法)
方法一:$emit / props 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件 <!--父组件--> <template> ...
- java - GC垃圾收集器详解(三)
以前收集器的特点 年轻代和老年代是各自独立且连续的内存块 年轻代收集必须使用单个eden+S0+S1进行复制算法 老年代收集扫描整个老年代区域 都是以尽可能少而快速地执行GC为设计原则 G1是什么 G ...