某一个项目需要和java后端做数据交互,需要用到上传,并且是跨域、鉴权上传,整理在此,以便有需要的时候能有记录
方法一、
function Upfile() {
var formData = new FormData();
var img_file = document.getElementById("File1");
var fileObj = img_file.files[0];
formData.append("file", fileObj);这里设置的是表单key、value,formData.append("Post Key", file input)
$.ajax({
type: "POST",
processData: false,//重要设置,默认为true。默认情况下,发送的数据将被转换为对象以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。,这里我们需要做文件上传,所以设置为false
url: "http://127.0.0.1/upload",
data: formData,
async: false,
dataType: "json",
contentType: false,//重要设置,这里设置成false,个人理解是不设置Requset数据类型
beforeSend: function (xhr) {
//在这里设置请求头,如果请求头没有特别的要求,可以删除此处代码
var Authorization = "";
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Accept", "*/*");
xhr.setRequestHeader("Access-Control-Max-Age", "3600");
xhr.setRequestHeader("Authorization", "Bearer " + Authorization);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
data = XMLHttpRequest.responseJSON;
},
success: function (resdata) {
data = resdata;
}
});
}
方法二、
function upload() {
var img_file = document.getElementById("File1");
var theFormFile = img_file.files[0];
var fd = new FormData();
fd.append('file', theFormFile);//上传的文件: 键名,键值
var url = "127.0.0.1/upload";//接口
url = url ? url : '';
var XHR = null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE版本不同,具体可以查下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if (XHR) {
XHR.open("POST", url);
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 && XHR.status == 200) {
var resultValue = XHR.responseText;
var data = JSON.parse(resultValue);
XHR = null;
}
}
//设置请求头
var Authorization = "";
XHR.setRequestHeader("Access-Control-Allow-Origin", "*");
XHR.setRequestHeader("Accept", "*/*");
XHR.setRequestHeader("Access-Control-Max-Age", "3600");
XHR.setRequestHeader("Authorization", "Bearer " + Authorization);
XHR.send(fd);
}
};