flask jQuery ajax 上传文件

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、由于我的页面背景颜色设置成黑色,所以字体颜色选了白色,这个无伤大雅。

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获取上传文件时的名字。

原文地址:https://www.cnblogs.com/Frange/p/8930688.html

时间: 2024-10-16 15:48:33

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

jQuery Ajax上传文件

function UploadFileExcel() { var file = $("#file_upload")[0].files[0]; var form = new FormData(); form.append("file", file); form.append("uid", uid); form.append("token", token); $.ajax({ url: eshopUrl + "/inde

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

首先创建一个网页,网页中添加如下代码. <h3>Upload File using Jquery AJAX in Asp.net</h3> <table> <tr> <td>File:</td> <td> <asp:FileUpload ID="fupload" runat="server" onchange='prvimg.UpdatePreview(this)' />

jS Ajax 上传文件报错&quot;Uncaught TypeError: Illegal invocation&quot;

jS Ajax 上传文件报错"Uncaught TypeError: Illegal invocation" query-3.1.1.min.js:4 Uncaught TypeError: Illegal invocation 错误原因: jQuery Ajax 上传文件处理方式, 使用ajax向后台发送数据时其中的图片数据的参数类型为file,属于对象,而不是一个字符串值.导致错误的出现 var formData = new FormData(); formData.append(

一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码:   <html>     <!-- 引入相关的js文件,相对路径  -->     <script type="text/javascript" src="js/jquery.js"></script>       <script type="text/javascript" src="js/ajaxfileupload.js"></script&g

ajax上传文件 基于jquery form表单上传文件

<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到用户填写的数据 var form_data_obj = new FormData(); form_data_obj.append('username',$('#id_username').val()); form_data_obj.append

闲话ajax,例ajax轮询,ajax上传文件

引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧! ajax的出现,可以出给用户带来了很好的体验,证据如下: 1.感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不

atitit.ajax上传文件的实现原理 与设计

atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直接实现上传文件 1 2.1. 传统的实现方式iframe 2 2.2. html5转码base64 3 2.3. 其它插件FLASH的实现原理 3 3. 上传进度的实现原理 3 3.1. 使用ajax结合服务端的进度返回,比較麻烦 4 4. 本地预览的解决 4 4.1. 用HTML5上传文件 4 5

使用html5特性--ajax上传文件

在html5以前,ajax上传文件算是一个比较麻烦的事,要是想显示一下上传进度就更不容易.遇到这种情况往往需要借助于第三方插件,比如jquery.fileupload.js.如今html5已经技术已经变成一个非常流行.非常新潮的技术了,各个浏览器厂商也实现了不少的html5规范,如今文件上传有了html5的支持已经变的相当容易了,我自己尝试了一下用javascript原生的api来实现ajax上传文件,为了页面不至于太丑,我使用了bootstrap的一些组件,先上效果图: 实现的功能介绍: aj

用iFrame模拟Ajax上传文件

前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的.flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大.最后只好模拟iframe来实现.发现相当的简单.泌阳县马奇建材 html: <iframe name="ajaxUpload" style=&qu