跨域上传文件示例

前端

<script>
    function uploadattach() {
        var fd = new FormData();
        fd.append("fileInput", document.getElementById('fileInput').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.open("POST", "https://test.com/upload");

        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.setRequestHeader("Content-Type", "multipart/form-data");

        xhr.send(fd);
    }
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            percentComplete是进度百分比
        }
        else {
            document.getElementById('status').innerHTML = '不支持进度计算';
        }
    }
    function uploadComplete(evt) {
        response = $.parseJSON(evt.target.responseText);
        如果返回值是json,response就是解析出的json对象
    }
</script>

后端

<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Referer,sec-ch-ua,sec-ch-ua-mobile,access-control-allow-origin");

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
    header("HTTP/1.1 204 No Content");
    exit;
}

php处理程序的最前面加入以上代码,表示接受跨域

也可以在nginx、IIS中通过复杂的设置的方式执行跨域上传,但是直接在php中处理是最简单的办法。

扫码关注我的公众号