input file上传文件
欢迎加入前端交流群交流知识获取视频资料:
如何使用input[type='file']来上传文件呢?
html:
//angular
<input type="file" (change)="fileChange($event)" placeholder="上传文件">
//vue
<input type="file" @change="fileChange" placeholder="上传文件">
js:
fileChange(event) {
let fileList = event.target.files;
if (fileList.length > ) {
let file = fileList[];
let formData = new FormData();
formData.append('uploadFile', file);
//你的post接口,formData发送
this.upgradeService.postDeviceFile(formData, (res) => {
})
}
}
serve:
注意这里发送请求的时候需要加上header让其以二进制文件流的形式去发送(formData)
let headerHttp = new HttpHeaders();
headerHttp = headerHttp.append('Content-Type', 'application/zip');
headerHttp = headerHttp.append('Accept', 'application/zip');
input file上传文件的更多相关文章
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- 使用input file上传文件中onChange事件只触发一次问题
每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...
- input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...
- input file上传文件弹出框的默认格式设置
我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...
- input:file上传文件类型(记录)
imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...
- angular input file 上传文件
<body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)&qu ...
随机推荐
- 编写可维护的javascript阅读笔记
格式 变量 变量命名, 采取小驼峰大小写 变量使用名词, 函数前缀为动词 局部变量应统一定义在函数的最上面, 而不是散落在函数的任意角落. 赋初始值的定义在未赋初始值的变量的上面. 我个人建议不使用单 ...
- linux下的头文件和库文件搜索路径 (转)
GCC 找头文件有三种策略: 1. 会在默认情况下指定到 /usr/include 文件夹 ( 更深层次的是一个相对路径, GCC 可执行程序的路径是 /usr/bin ,那么它在实际工作时指定头文 ...
- vc++实例创建简单窗体
#include<windows.h>#include<stdio.h>LRESULT CALLBACK WinSunProc(HWND hwnd,UINT uMsg,WPAR ...
- Android 将Android项目打包成aar文件
参考资料:https://blog.csdn.net/csdn_mm/article/details/78364444
- git 教程1
一. git简介 1.1 git是什么? 是一个分布式版本控制软件 1.2 git的作用是什么? 版本控制 ,团队协作 1.3 git的优势在哪里? 同类型的版本控制软件:CVS及SVN,Linus一 ...
- [1] first day
一.几个工具包 [1]pandas(数据分析工具) https://zhuanlan.zhihu.com/p/33230331 https://zhuanlan.zhihu.com/p/2501351 ...
- luogu 4240 毒瘤之神的考验 (莫比乌斯反演)
题目大意:略 题面传送门 果然是一道神duliu题= = 出题人的题解传送门 出题人的题解还是讲得很明白的 1.关于$\sum\limits_{i=1}^{n}\sum\limits_{j=1}^{m ...
- vue项目优化--使用CDN和Gzip
使用vue-cli构建的vue项目,在打包发布的时候,发现打包后的文件体积很大,使用webpack-bundle-analyzer分析后,发现占用空间最多的是引用的第三方依赖.第三方的依赖文件可以使用 ...
- web前端对文件的引用规则
web前端一般常用文件 .html .css .js.但是当用css文件和html引入资源(比如图片)时,路径可能不相同.下面总结了几条. 使用相对路径引入规则: html或者js引入图片,按照htm ...
- J2EE提高之知识清单
Oracle数据库 JDBC事务 Spring事务 SOA XML/JSON redis/memcached 反射,类加载,JVM 工具类:UML, Maven, 性能类:CPU监控,memary监控 ...