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 ...
随机推荐
- winfrom窗体属性
- 定义maven的项目结构
创建一个Maven 的父项目 新建一个maven项目,选中create a simple project 填写以下内容: 如下内容: Group Id :edu.zipcloud.cloudstree ...
- Sql Server 连接池
在看缓存的一篇文章中,看到连接池的三个字,来充充电. 原文连接 这篇讲了关键字 其实我们一直在使用SqlServer的连接池.在连接字符串中,Pooling为是否启用连接池,默认值为true,表示启用 ...
- 几个概念:x86、x86-64和IA-32、IA-64
最近在学习操作系统方面的知识,学习操作系统难免要和CPU打交道,虽然现在CPU和操作系统不像计算机发展初期一样是绑定在一起的,但是大家都知道操作系统和CPU Architecture的联系是很紧密的, ...
- Sql Server 优化----SQL语句的执行方式与锁以及阻塞的关系
阻塞原因之一是不同的Session在访问同一张表的时候因为不兼容锁的原因造成的, 当前执行的SQL语句是否被阻塞(或者死锁),不仅跟当前表上的已有的锁有关,也会跟当前执行的SQL语句的执行方式有关 简 ...
- WP - 控件基础-按钮控件
Button:HyperlinkButton:RepeatButton:ToggleButton 1.Button: <button content="Button" ...
- Programming Recipes
Recipes是从一本书上看来的,即有诀窍又有食谱的意思.这里想记一些工作中遇到的问题和解决方法,说决窍有点过了,说食谱照单做又不足,所以Recipe这个词两个意思都有混合起来正合适. 1.Windo ...
- 开启RxSwift之旅——开篇
开启RxSwift之旅——开篇 RxSwift 是 ReactiveX 在 Swift 下的实现.ReactiveX 是一个通过使用可观察序列来组合异步和基于事件的程序的库. 很多地方通常把 Reac ...
- React从安装到实战
建议:初学者看之前请先看一遍菜鸟教程 可以安装一个ATOM编辑器,本人觉得很好用 一.安装并启动项目:网址 搭建好的项目目录为: 二.开始写项目: 1.组件到界面流程: 定义一个组件app.js导出 ...
- 安装sublimeServer插件
1.安装目的 做练习在谷歌浏览器中遇到报错信息:axios.min.js:8 Failed to load file:///E:/%E8%87%AA%E5%AD%A6/vue%E5%AD%A6%E4% ...