Jquery Ajax通过接口上传文件实现及注意事项

妖狐艹你老母 2023-10-08 11:08 8阅读 0赞

## 准备工作 ##

*  文件上传接口：[http://localhost:8081/manage/upload/upload\_file.do][http_localhost_8081_manage_upload_upload_file.do]

## 代码实现 ##

*  HTML

*  JavaScript

$("#upload_file").change(function () {
        
       	var file = $("#upload_file")[0].files[0];
        var formData = new FormData();
        formData.append("upload_file",file);
        $.ajax({
        
          	url:"/manage/upload/upload_file.do",
            type:"POST",
            data:formData,
            dataType:"json",
            processData : false,	// 使数据不做处理
            contentType: false,		// 不要设置Content-Type请求头
            success:function() {
        
            	if (res.status == 0){
        
                    alert("成功");
                } else {
        
                    alert(res.msg);
                }
            }
       	});

## 注意事项 ##

*  上传方式为`type:"POST"`
 *  文件其参数类型属于对象，可以创建一个 `FormData` 对象，然后调用它的 `append()` 方法来添加字段
    
        var file = $("#upload_file")[0].files[0];
        var formData = new FormData();
        formData.append("upload_file",file);
 *  通过Ajax上传表单需要设置`contentType："application/x-www-form-urlencoded"`，这个和文件没有关系，但是因为我通过Ajax提交form表单忘记设置，导致上传表单失败。

[http_localhost_8081_manage_upload_upload_file.do]: http: