1、html 代码

 <div>
<form id="uploadForm" enctype="multipart/form-data" >
<div>
<input type="file" name="file" value="" style="color: white">
<input type="button" value="上传" id="upFileBtn">
</div>
</form>
</div>

注:1、html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有。

  2、由于我的页面背景颜色设置成黑色,所以字体颜色选了白色,这个无伤大雅。

 2、js代码

var up_file = function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
url:"/test/up_file",
type: "POST",
data: formData,
async: true,
cashe: false,
contentType:false,
processData:false,
success:function (returndata) {
alert(returndata)
  },
  error: function (returndata) {
     alert("上传失败!")

  })

注:如果要用ajax上传文件,则要用FormData将文件转化为FormData对象。

3、flask部分

@test.route('/up_file', methods=['GET', 'POST'])
def up_file():
if request.method == "POST":
file = request.files['file']
# file_name = "test.csv"
file_name = file.filename
file.save(os.path.join('templates\\files', file_name)) return '上传成功'

注:1、本文没有将蓝本部分写出来,相信路由的配置还是不难的。

  2、本代码将文件存在服务器的templates下files文件夹中,可以直接给文件取个新名字,也可以用rerquest.files['file'].filename获取上传文件时的名字。

flask jQuery ajax 上传文件的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  3. jquery ajax 上传文件

    html:<!-- /.tab-pane --> <div class="tab-pane" id="head_portrait"> & ...

  4. jquery ajax 上传文件和传递参数到一个接口的实现方法

    参考:https://blog.csdn.net/qq_15674631/article/details/81095284 参考:https://www.jianshu.com/p/46e6e03a0 ...

  5. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  6. jQuery Ajax 上传文件改进

    如果用户取消上传后 背景 提示自动消失了.... 修正Bug.... 同时也更新了不同上传类型的提示字体大小... 2017-05-26 增加了鼠标释放提示 先看之前的效果: 再看现在的效果: 升级 ...

  7. jQuery Ajax 上传文件夹及文件

    我们先来看一下文件夹结构 这是上传处理的: 看一下系统日志: 升级 HTML5文件实现拖拽上传提示效果改进(支持三种状态提示) 拖拽过程详解: 1:文件未拖出文件选择框的时候提示:将要上传的文件或文件 ...

  8. asp.net 中使用JQuery Ajax 上传文件

    首先创建一个网页,网页中添加如下代码. <h3>Upload File using Jquery AJAX in Asp.net</h3> <table> < ...

  9. jQuery Ajax上传文件

    JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: &q ...

随机推荐

  1. xftp上传文件失败,执行程序发现磁盘满了:No space left on device

    参考链接 No space left on device 解决Linux系统磁盘空间满的办法http://www.cnblogs.com/aspirant/p/3604801.html如何解决linu ...

  2. MFC基础

    入门博客:http://www.cnblogs.com/qinfengxiaoyue/category/451679.html 消息机制:http://www.cnblogs.com/qinfengx ...

  3. power designer 连接mysql提示“connection test failed”

    本机环境: win10 64位 jdk8 64位 问题: 测试连接时,总是提示 根据网上搜索: 根源在于:PowerDesigner based on 32 bit JVM kernel 参考: ht ...

  4. Java Class文件格式详解

    magic[4字节] 魔数,用来判断是否可以被虚拟机使用.固定值为0xCAFEBABE(咖啡宝贝)minor_version[2字节] 次版本号major_version[2字节] 主版本号,低版本的 ...

  5. uva 11636 Hello World!

    https://vjudge.net/problem/UVA-11636 题意: 希望输出n条语句,但是并不会循环,所以只能复制粘贴,一条语句经过复制粘贴后可以变为2条,2条变成4条....每次可以只 ...

  6. vue2路由

    我们在前面的学习过程中不管是在学习angular还是vue1,都会遇到二级路由,我们现在先来看一下vue2中的一级路由. 首先要引入的是vue2与路由文件. js代码: <script> ...

  7. 彻底弄懂JS的事件冒泡和事件捕获

      先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡:   return false; ...

  8. 使用Markup解析xml文件

    1:怎么获取Markup.cpp 和 Markup.h 首先到http://www.firstobject.com/dn_markup.htm链接下,下载Release 11.5 zip (579k) ...

  9. OS模块文件操作一

    1          文件操作 1.1               OS模块 l  import os  #引入os模块 l  import os.path  #引入os下的path子模块 l  os ...

  10. [CVPR2018] Context-aware Deep Feature Compression for High-speed Visual Tracking

    基于内容感知深度特征压缩的高速视觉跟踪 论文下载:http://cn.arxiv.org/abs/1803.10537对于视频这种高维度数据,作者训练了多个自编码器AE来进行数据压缩,至于怎么选择具体 ...