<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormData</title>
</head>
<body>
<form name="form1" id="form1">
<p>photo:<input type="file" name="file" id="photo"></p>
<p><input type="button" name="b1" value="submit" id="m-btn"></p>
</form>
<div id="result"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
$(function() {
var myAction = {}
let ajaxConfig = {
host: 'http://10.10.10.65',
authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrZW4iLCJpYXQiOjE1NDYwNzQ3NTYsImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJpc19zdXBlcnVzZXIiOjEsImlkIjo5LCJsb2dpbl90aW1lIjoxNTQ2MDc0NzU2fSwiZXhwIjoxNTQ2Njc0NzU2fQ.ntmWGZRVIxBpcc0EEZ3rTGyVL8SPmRbItYr4znShITU'
}
var dom = {
btn: $('#m-btn')
}
$.extend(myAction, {
initEvent: function() {
dom.btn.on('click', function() {
myAction.send2()
})
},
send1: function() {
var form = document.getElementById("form1");
var formData = new FormData(form);
$.ajax({
url: ajaxConfig.host + "/api/v2/tasks/upload_file",
type: "POST",
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Authorization", ajaxConfig.authorization);
},
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(res) {
console.log(res);
},
error: function(e) {
}
});
},
send: (config) => {
let obj;
if (config.data instanceof FormData) {
obj = config.data;
} else {
obj = config.data ? JSON.stringify(config.data) : {};
}
let method = config.method || 'get';
let url = config.url;
let params = {}, data;
if (method === 'get') {
params = obj;
} else {
data = obj;
}
let response = axios({
url: ajaxConfig.host + url,
method: method,
headers: { "Authorization": ajaxConfig.authorization },
params: params,
data: data
});
return response;
},
send2: function () {
var form = document.getElementById("form1");
var formData = new FormData(form);
let selectedFile = document.getElementById("form1")[0].files[0];
var reader = new FileReader();//这是核心,读取操作就是由它完成.
reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
//console.log(reader.result)
reader.οnlοad=function(e){
console.log(this.result)
}
myAction.send({
url: "/api/v2/tasks/upload_file",
method: 'POST',
data: formData
}).then(function(res) {
console.log(res);
});
}
})
var init = function() {
myAction.initEvent()
}()
})
</script>
</body>
</html>