Jquery实现跨域异步上传文件总结

下面是关于“Jquery实现跨域异步上传文件”的详细攻略。

什么是跨域及其实现原理

首先，我们要了解下什么是跨域（Cross-domain），顾名思义就是不同域名或不同端口之间的数据或请求传输。

在HTTP协议中，浏览器工作的原理是在同源策略（Same-Origin Policy）下，只能发送同一源下的请求（同一协议、同一IP地址、同一端口号），而不能跨域发送请求。这里的同一源是指：协议、域名、端口号都相同。

而要实现跨域，我们可以采用以下几种方式：

1. JSONP跨域：利用script标签可以跨域引用资源的特性，在请求时添加callback参数，服务器端将处理好的数据包装在callback函数里返回给客户端，客户端就可以读取到数据。

2. CORS跨域：现代浏览器支持HTML5规范中提出的跨源资源共享（Cross-Origin Resource Sharing，CORS）技术。通过在服务器端设置响应头Access-Control-Allow-Origin来告知浏览器哪些源可以访问资源。

3. 代理跨域：在同一个域名下开发一个代理服务器，让这个代理服务器去请求需要跨域访问的资源，再把获取到的数据返回给前端。

Jquery实现跨域异步上传文件

如果我们需要在实现了跨域的情况下进行文件上传的话，我们就可以使用jquery的ajax方法配合FormData实现异步上传文件。

步骤如下：

1.构造FormData对象

我们在进行文件上传时，需要在提交表单数据的同时上传文件。FormData对象的作用就是帮我们构造表单数据，使之它成为可用于AJAX提交的数据。

var formData = new FormData();  // FormData对象初始化

formData.append('file', fileInput.files[0]);  // 添加一个文件将表单数据添加于formData中

2.使用Jquery ajax方法发送POST请求

Jquery ajax方法是ajax请求最常用的方式之一，我们可以利用ajax方法进行POST请求。

$.ajax({
    url: 'http://localhost:8080/upload',  // 请求地址
    type: 'POST',  // 请求类型
    data: formData,  // 请求数据
    cache: false,  // 不要缓存
    processData: false,  // 不要将数据处理成查询字符串
    contentType: false,  // 不要设置请求头

    success: function(res) {  // 请求成功回调
        console.log('上传成功！');
    },
    error: function(res) {  // 请求失败回调
        console.log('上传失败！');
    }
});

注意：远程服务器需要设置响应头Access-Control-Allow-Origin，才能接收到跨域请求。

示例1：使用CORS跨域上传文件

html代码：

<input type="file" id="fileInput"/>
<button onclick="uploadFile()">上传文件</button>

javascript代码：

function uploadFile() {
    var formData = new FormData();
    formData.append('file', fileInput.files[0]);

    $.ajax({
        url: 'http://localhost:8080/upload',  // 服务器地址
        type: 'POST',  // 请求类型
        data: formData,  // 请求数据
        xhrFields: {  // 跨域请求设置携带Cookie
            withCredentials: true
        },
        crossDomain: true,  // 开启跨域请求
        processData: false,  // 不要将数据处理成查询字符串
        contentType: false,  // 不要设置请求头

        success: function(data) {  // 成功回调
            console.log('上传成功：', data);
        },
        error: function() {  // 失败回调
            console.log('上传失败！');
        }
    });
}

Java代码：

@RestController
public class UploadController {
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) throws Exception {
        try (
            InputStream in = file.getInputStream();
            FileOutputStream out = new FileOutputStream("D:/image/" + file.getOriginalFilename());
        ) {
            byte[] buffer = new byte[4096];
            int len = 0;
            while ((len = in.read(buffer)) != -1) {
                out.write(buffer, 0, len);
            }
            return "上传成功";
        } catch (Exception e) {
            throw new Exception("上传失败：" + e.getMessage());
        }
    }
}

在该例子中，使用了CORS（Cross-Origin Resource Sharing）技术实现跨域上传。前端使用jquery的ajax方法进行POST请求，同时设置crossDomain和xhrFields，携带Cookie进行请求；后端在处理请求时设置响应头Access-Control-Allow-Origin为"*"，表示允许任何请求源进行跨域访问。

示例2：使用JSONP跨域上传文件

html代码：

<input type="file" id="fileInput"/>
<button onclick="uploadFile()">上传文件</button>

javascript代码：

function uploadFile() {
    var formData = new FormData();
    formData.append('file', fileInput.files[0]);

    $.ajax({
        url: 'http://localhost:8080/upload',  // 服务器地址
        type: 'POST',  // 请求类型
        data: formData,  // 请求数据
        dataType: 'jsonp',  // JSONP跨域
        jsonp: 'callback',  // 指定callback参数名
        jsonpCallback: 'handleResponse',  // 指定回调函数名
        processData: false,  // 不要将数据处理成查询字符串
        contentType: false,  // 不要设置请求头

        success: function(data) {  // 成功回调
            console.log('上传成功：', data);
        },
        error: function() {  // 失败回调
            console.log('上传失败！');
        }
    });
}

function handleResponse(response) {  // 定义回调函数
    console.log(response);
}

Java代码：

@RestController
public class UploadController {
    @RequestMapping(value = "/upload", produces = "application/javascript;charset=UTF-8")
    public String upload(@RequestParam("file") MultipartFile file, String callback) throws Exception {
        try (
            InputStream in = file.getInputStream();
            FileOutputStream out = new FileOutputStream("D:/image/" + file.getOriginalFilename());
        ) {
            byte[] buffer = new byte[4096];
            int len = 0;
            while ((len = in.read(buffer)) != -1) {
                out.write(buffer, 0, len);
            }
            return callback + "({\"message\":\"上传成功\"})";
        } catch (Exception e) {
            throw new Exception("上传失败：" + e.getMessage());
        }
    }
}

在该例子中，使用了JSONP（JSON with Padding）技术实现跨域上传。前端使用jquery的ajax方法进行POST请求，同时设置dataType为jsonp，指定callback参数名和回调函数名；后端在处理请求时将返回结果处理成jsonp格式，将结果包含在回调函数名称中返回到前端。

总结

由于浏览器同源策略的限制，跨域请求在前端开发中是非常常见的情况。在实现文件上传时，我们可以使用jquery的ajax方法配合FormData实现跨域异步上传文件，针对不同的跨域实现方式可以做出相应的调整。