文件的上传方式

最新推荐文章于 2024-08-02 16:51:08 发布

转载最新推荐文章于 2024-08-02 16:51:08 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/4042451/blog/3018095

文章标签：

#python #javascript #ViewUI

本文详细介绍了三种文件上传方法：表单提交、基于XMLHttpRequest的ajax方式及使用jQuery的$.ajax接口。通过实例代码展示了如何实现文件上传功能。

2019独角兽企业重金招聘Python工程师标准>>>

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

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public boolean itemImport(@RequestParam MultipartFile file) throws Exception{

        if (file.isEmpty()) {
            return false;
        }

        return true;
    }

}

1. 表单提交

 <form action="/upload" method="post" enctype="multipart/form-data">
        选择文件:<input type="file" name="file" /><br />
        <input type="submit" value="上传" />
 </form>

不需要写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