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. Docker的容器操作

    启动一次性运行的容器 入门级例子:从ubuntu:14.04镜像启动一个容器,成功后在容器内部执行/bin/echo 'hello world'命令,如果当前物理机没有该镜像,则执行docker pu ...

  2. python入门(13)获取函数帮助和调用函数

    Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数abs,只有一个参数.可以直接从Python的官方网站查看文档: http://doc ...

  3. 错误解决:HibernateSystemException-HHH000142: Javassist Enhancement failed

     今天做项目报了一个错误 错误的原因是: 有级联查询的时候,一对多,多对一配置时要考虑默认延迟加载的问题,需要把延迟加载关闭. 然后就能正确查询出结果了  补充知识: 延迟加载表现在:比如:我们要查询 ...

  4. POJ-2632 Crashing Robots模拟

    题目链接: https://vjudge.net/problem/POJ-2632 题目大意: 在一个a×b的仓库里有n个机器人,编号为1到n.现在给出每一个机器人的坐标和它所面朝的方向,以及m条指令 ...

  5. hdu1568 Fibonacci---前4位

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1568 题目大意: 求斐波那契数列第i项的前四位.i<1e8 思路: 由于数据范围大,不可能打表 ...

  6. day3 自定义指令详解

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  7. java中的链表编写

    通过while循环取出节点内容 class Node{//定义一个节点类,用于保存数据和取得下一个节点 private String data;//节点中数据 private Node next;// ...

  8. PHP面向对象-看父类调用子类方法

    大部分面向对象编程语言中,父类是不允许调用子类的方法的,但是PHP中可以 1.父类调用子类方法示例 class A { public function testa() { $this->test ...

  9. [LeetCode] Minimum ASCII Delete Sum for Two Strings 两个字符串的最小ASCII删除和

    Given two strings s1, s2, find the lowest ASCII sum of deleted characters to make two strings equal. ...

  10. pdf如何转换为word文档

    我们经常会遇到需要将PDF转换为WORD文档,对于我来讲,有些PDF没有目录,看起来非常不方便,于是就特别想转成WORD,然后增加目录,想看某一节内容时,快速查找. 这里我总结了一些方法,后续也会不断 ...