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

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

作者: 裂开的汤圆 | 来源:发表于2019-06-04 23:47 被阅读0次

    前端代码:

     # 这里使用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']

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/icwltctx.html