点击按钮实现文件上传(web前端),ajax提交formdata

前端代码:

 # 这里使用display:none将input标签隐藏
 <input type="file" name="file" id="file" onchange="fileUpload()" style="display:none">
 <input type="button"  onclick="select_file()" value="上传">

formdata对象,可以理解成HTML中form(表单)的抽象。可以创建一个formdata对象,然后使用AJAX进行异步提交表单数据。
js代码如下:

# 点击button按钮触发input标签
function select_file(){
    $("#file").trigger("click");
}


function fileUpload(){
    # 创建formdata对象
    var formData = new FormData();
    # 给formData对象添加<input>标签,注意与input标签的ID一致
    formData.append('file', $('#file')[0].files[0]);
    $.ajax({
                url : '/xxx',//这里写你的url
                type : 'POST',
                data : formData,
                contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置
                processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post)
                dataType: 'json',//这里是返回类型,一般是json,text等
                clearForm: true,//提交后是否清空表单数据
                success: function(data) {   //提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
                    aler('上传成功');
                },
                error: function(data, status, e) {  //提交失败自动执行的处理函数。
                    console.error(e);
                }
            });
}

python-flask框架,可以使用如下方法获取文件流
request.files['file']

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值