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. SQL Server 实现递归查询

    基础数据/表结构                 Sql 语句 ;With cte(id,pid,TName)As ( Select id,pid,TName Union All Select B.i ...

  2. 微信小程序如何动态增删class类名

    简述 由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的& ...

  3. Spark快速入门

    Spark 快速入门   本教程快速介绍了Spark的使用. 首先我们介绍了通过Spark 交互式shell调用API( Python或者scala代码),然后演示如何使用Java, Scala或者P ...

  4. JSON的简单书写(初学),使用Java语言反序列化

    这个适合初学者:刚刚我学习的 1.基础的"JSON"     对象是用一对大括号: 例如: {      "name":"xiaohua", ...

  5. 使用TortoiseSVN打Tag

    参考了 https://blog.csdn.net/liuzx32/article/details/9123401. 值得注意的点是: 选择路径的时候,不要先点进去自己建好叶子节点路径再选择该路径,会 ...

  6. oracle sequence 异常

    对于数据量较大的序列进行分析 ,出现风险有两种情况1. 序列号随着业务增加变大时,DB的字段空间不足.>>产生后果:插入报错.>>解决方案:给存储序列号的字段进行扩容,且字段长 ...

  7. Properties文件中文属性读取是乱码问题

    项目当中遇到了需要从Properties文件中读取配置属性的需求,本来是存储的中文转码后的属性,但是考虑到后期更改问题就变成java代码中进行转码,代码如下: Properties pros = ne ...

  8. winform中的数据绑定

    1. 简单的数据绑定 例1 using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[& ...

  9. 一、spring的成长之路——代理设计模式

    java常用的设计模式详解: 1.代理模式(JDK的动态代理) [IDept.java] ​ 这是一个简单的就接口,进行数据的更新 package com.itcloud.pattern.proxy; ...

  10. [LeetCode] Stickers to Spell Word 贴片拼单词

    We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...