文件的上传方式

古城微笑少年丶 2022-01-13 09:55 263阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

前提：服务器提供文件上传Controller，如：

@RestController
    public class FileUploadController {
    
        @PostMapping("/upload")
        public boolean itemImport(@RequestParam MultipartFile file) throws Exception{
    
            if (file.isEmpty()) {
                return false;
            }
    
            return true;
        }
    
    }

1. 表单提交

不需要写js代码，表单提交会导致页面跳转，提交成功后，会转到路径‘/upload’ 对应的view！（该例子中，页面展示true）

2. ajax方式提交（基于XMLHttpRequest对象和onclick方法）

选择文件:<input type="file" id="file1" /><br />
     <input type="button" onclick="UploadFile()" value="上传" />

function UploadFile() {
        var fileObj = document.getElementById("file1").files[0]; // 获取文件对象
        var FileController = "/upload";                    // 接收上传文件的后台地址
        // FormData 对象
        var form = new FormData();
        form.append("file", fileObj);                           // 文件对象
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
            alert("上传完成!");
        };
        xhr.send(form);
    
    }

3. ajax方式提交（使用jQuery的$.ajax接口）

选择文件:<input type="file" id="file1" /><br />
      <input type="button" id="upload" value="上传" />

$("#upload").click(function () {
        var fileObj = document.getElementById("file1").files[0];
        var formData = new FormData();
        formData.append("file", fileObj);
        $.ajax({
            type: 'post',
            url: "/upload",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
        }).success(function (data) {
            alert(data);
        }).error(function () {
            alert("上传失败");
        });
    });

转载于:https://my.oschina.net/u/4042451/blog/3018095

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/0818c8b7bc264f3992472574aca7ead9.png