ajax点击按钮实现上传文件

前段代码：

 //  这里使用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);
                }
            });
}

转载于:https://blog.51cto.com/13955864/2235382