项目是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上传的更多相关文章

  1. FormData对象实现文件Ajax上传

    后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...

  2. models渲染字典&form表单上传文件&ajax上传文件

    {# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

  3. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  4. fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传

    前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...

  5. vue-resource+iview上传文件取消上传

    vue-resource+iview上传文件取消上传 子组件: <template> <div class="upload-area-div"> <U ...

  6. ajax:html5上传文件,上传之前可以实现本地预览

    本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

  7. Koa - 使用koa-multer上传文件(上传限制、错误处理)

    前言 上传文件在开发中是很常见的操作,今天我选择使用koa-multer中间件来实现这一功能,除了上传文件外,我还会对文件上传进行限制,以及发生上传错误时的处理. 由于原来的 koa-multer 已 ...

  8. php 上传文件实例 上传并下载word文件

    上传界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. ASP.NET上传文件,已经上传的大小保存在session中,在另一个页面中读取session的值不行

    想自己做个ASP.NET上传文件时显示进度条的, 按照自己的想法,其实也就是显示每次已经上传的字节,从网上找到一个方法是能够把文件变成流以后再慢慢写入的,我在那个循环写入的时候每循环一次都把已经上传的 ...

  10. php 上传文件并对上传的文件进行简单验证(错误信息,格式(防伪装),大小,是否为http上传)

    <body> <?php /** *验证错误 *如果有错,就返回错误,如果没错,就返回null */ function check($file) { //1:验证是否有误 if($f ...

随机推荐

  1. CAS 单点登录4.24版本 登录调用其它系统并且返回客户端用其它的用户信息改造

    1.登录调用其它系统.修改deployerConfigContext.xml <?xml version="1.0" encoding="UTF-8"?& ...

  2. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  3. SAP 汇率处理总结

    SAP 汇率处理总结 OB08 http://blog.sina.com.cn/s/blog_a440b7ee0101mvpd.html   分类: FI.GL 1.能想到的几种Currency:lo ...

  4. hdu 4349 Xiao Ming's Hope 规律

    Xiao Ming's Hope Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. centos7 彻底卸载PHP7

    [root@xxx php-memcached]# rpm -qa | grep php php70w-common--.w7.x86_64 php70w-devel--.w7.x86_64 php7 ...

  6. Pandas中关于accessor的骚操作

    来自:Python那些事 pandas中accessor功能很强大,可以将它理解为一种属性接口,通过它获得额外的方法. 下面用代码和实例理解一下: import pandas as pd pd.Ser ...

  7. kafka+docker+python

    昨天晚上刚刚才花3小时看完<日志:每个软件工程师都应该知道的有关实时数据的统一概念>. 今天就把kafka在docker容器里运行起来,github上有几个,但都太复杂了. 我自己写个最简 ...

  8. lua --- Module

    首先需要明白,一般情况下,我们的定义的lua模块的文件与模块名(其实就是table的名字)是一致的,当然,不一致代码也是可以编译的(亲测),之所以这样,本人认为是为了实际项目中管理的方便.以下是定义模 ...

  9. lua --- __newindex

    -- __newindex 对表进行更新 MyMetatable = {} MyTable = }, {__newindex = MyMetatable}) MyTable.newKey1 = pri ...

  10. lua闭包实现迭代器遍历数组

    --实现访问数组的迭代器 function visit(t) return function() i = i + return t[i] end end --要访问的数组 ,,,} itor = vi ...