ajax上傳圖片
阿新 • • 發佈:2018-01-31
script class soft imp XML 表單 import 項目 javascrip
某一個項目需要和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上傳圖片