某一个项目需要和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); ???????} ???};
ajax上传图片
原文地址:https://www.cnblogs.com/weiaiy/p/8391432.html