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 ...
随机推荐
- idiom的学习笔记(一)、三栏布局
三栏布局左右固定,中间自适应是网页中常用到的,实现这种布局的方式有很多种,这里我主要写五种.他们分别是浮动.定位.表格.flexBox.网格. 在这里也感谢一些老师在网上发的免费教程,使我们学习起来更 ...
- 企业级Spring应用的搭建
本次博客将要对SpringMVC做简单的介绍以及环境的搭建: 概述 Spring 框架是一个开源的平台,属于设计层面框架,整个系统面向接口,是分层的JavaSE/EE开源框架,用于解决复杂的企业应用开 ...
- MFC知识点总结
一:消息1.什么是消息?消息是驱动windows系统运行的基础.从计算机的角度来看,消息就是一个整数. (1)一个无符号整数,是消息值: (2)消息附带的WPARAM和LPARAM类型的参 ...
- background-attachment css3属性
<style type="text/css"> body{ margin: 0; } .zhan{ width: 100%; height: 500px; backgr ...
- ubuntu 16.04 php5 环境搭建
Ubuntu 16.04默认安装php7.0环境,但是php7目前兼容性并不是很好,如果自行安装php5需要清除php7的已安装包,否则会报错. 移除默认及已安装的PHP包 sudo dpkg -l ...
- DataGridView属性设置汇总
1.标题列居中 外观 ColumnHeadersDefaultCellStyle - Alignment - MiddleCenter 2.表格内容居中 外观 DefaultCellStyle - ...
- 写给VC++ Windows开发的初学者 一片不错的博文
不知不觉2010年都过了半年了,想来我学C语言已经12个年头了(从1998年开始),用VC++也有11年了,最早使用Turbo C2.0 ,也学过汇编,后来使用Borland C++3.0 .Micr ...
- PythonOpenCV--Rtrees随机森林
360确实很个性,哈哈,你个貔貅,只吃不吐! Rtrees介绍!参考链接:http://docs.opencv.org/modules/ml/doc/random_trees.html 原文链接:Py ...
- CSS读书笔记(3)---清除浮动的几种方法
浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...
- (转)基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍
http://www.cnblogs.com/wuhuacong/p/3281103.html 最近花了很多时间在重构和进一步提炼Winform开发框架的工作上,加上时不时有一些项目的开发工作,我博客 ...