使用formData上传文件,ajax上传
项目是vue项目,直接贴部分代码了:
html:
<input type="file" name="fileTable" @change="changeFile($event)" ref="fileTable">
js:
data(){
return {
fileTable:''
}
},
methods:{//导入文件
changeFile(e) {
var file = e.target.files[0]
var reader = new FileReader()
var that = this
reader.readAsDataURL(file)
reader.onload = function(e) {
that.fileTable = this.result;
that.uploadFile();
}
},
uploadFile:function(){
if (this.$refs.fileTable.files.length !== 0) {
var file = new FormData()
file.append('uploadExcel', this.$refs.fileTable.files[0])
console.log(file);
$.ajax({
url:baseUrl + '/usergroup/templateimport',
type:'post',
data:file,
datatype: 'json',
cache:false,
traditional: true,
contentType: false,
processData: false,
success: function (res) {
console.log(res);
},
error: function (error) {
console.log(error);
}
});
}
}
}
使用formData上传文件,ajax上传的更多相关文章
- FormData对象实现文件Ajax上传
后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...
- models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
- fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传
前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...
- vue-resource+iview上传文件取消上传
vue-resource+iview上传文件取消上传 子组件: <template> <div class="upload-area-div"> <U ...
- ajax:html5上传文件,上传之前可以实现本地预览
本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...
- Koa - 使用koa-multer上传文件(上传限制、错误处理)
前言 上传文件在开发中是很常见的操作,今天我选择使用koa-multer中间件来实现这一功能,除了上传文件外,我还会对文件上传进行限制,以及发生上传错误时的处理. 由于原来的 koa-multer 已 ...
- php 上传文件实例 上传并下载word文件
上传界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- ASP.NET上传文件,已经上传的大小保存在session中,在另一个页面中读取session的值不行
想自己做个ASP.NET上传文件时显示进度条的, 按照自己的想法,其实也就是显示每次已经上传的字节,从网上找到一个方法是能够把文件变成流以后再慢慢写入的,我在那个循环写入的时候每循环一次都把已经上传的 ...
- php 上传文件并对上传的文件进行简单验证(错误信息,格式(防伪装),大小,是否为http上传)
<body> <?php /** *验证错误 *如果有错,就返回错误,如果没错,就返回null */ function check($file) { //1:验证是否有误 if($f ...
随机推荐
- 【Hadoop 分布式部署 四:配置Hadoop 2.x 中主节点(NN和RM)到从节点的SSH无密码登录】
******************* 一定要使这三台机器的用户名相同,安装目录相同 ************* SSH 无密钥登录的简单介绍(之前再搭 ...
- getAttribute与getParameter的区别
1.getParameter得到的是字符串,其取值源于jsp页面,从jsp页面中接受一个存在的参数,多用于servlet中,用于判断业务的类型和跳转页面.如: request.getParameter ...
- 17秋 SDN课程 第五次上机作业
17秋 SDN课程 第五次上机作业 Project:https://github.com/Wasdns/new_balance Slide is available at https://github ...
- 在 JSDOM v11 中使用jQuery
在JSDOM v11中使用jQuery 从v10开始,jsdom提供了更灵活的API. https://swashata.me/blog/use-jquery-jsdom-v11/ const tes ...
- 设计模式(五)Builder Pattern建造者模式
在我们日常生活中,如构建一个飞船,一个手机,一栋建筑,都会有非常复杂的组装,这时候应该用到建造者模式 以建造一个飞船为例 案例:造小页飞船 1.飞船各部分元件 package com.littlepa ...
- 插件写法之脚本运行环境,mac和window检测
(function(root, factroy){ /* * 在这里进行对脚本运行环境的检测判断 * 浏览器中 有window对象 * node.js服务器端 有Global对象 * * IE11 ...
- DAY1 计算机组成和操作系统
一.编程与编程目的 1.编程语言的定义 编程语言是人与计算机之间沟通的介质 2.什么是编程 编程就是程序员通过编程语言让计算机实现所想做的事 3.编程的目的 解放人力,让计算机按照人的逻辑思维进行工作 ...
- Lua和C++交互 学习记录之六:全局函数交互
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...
- 第 8 章 容器网络 - 053 - overlay 是如何隔离的?
overlay 是如何隔离的? 不同的 overlay 网络是相互隔离的. 创建第二个 overlay 网络 ov_net2 并运行容器 bbox3. docker network create -d ...
- 第 5 章 网络 - 031 - none和host网络的适用场景
none和host网络的适用场景 Docker 安装时会自动在 host 上创建三个网络,用 docker network ls 命令查看: root@ubuntu:~# docker network ...