<!DOCTYPE html>
<html>
?<head>
???<title>test</title>
?</head>
?<body>
???<input type="file" id="fileUpload">
???<button id="submit">点击上传文件</button>
<script src="javascripts/jquery-3.2.1.min.js"></script>//此处需自己引入jquery文件
<script>
//方法一：原生ajax上传文件
document.getElementById(‘submit‘).onclick = function(){
var file = document.getElementById(‘fileUpload‘).files[0];
??var formData = new FormData();
??formData.append(‘name‘,‘libin‘);
??formData.append(‘userFile‘,file);
??var oFileBody = ‘<a id="a"><b id="b">hey!</b></a>‘; // Blob对象包含的文件内容
??var oBlob = new Blob([oFileBody], { type: "text/xml"});
??var oReq = new XMLHttpRequest();
??oReq.open("POST", "http://localhost:3000/formUpload");
// 文件上传完毕的回调
oReq.upload.onloadend = function(e) {
console.log(‘接收完成‘+e.loaded+‘/‘+e.total);
}
oReq.send(formData);
//方法二：通过jquery的ajax方法上传文件
document.getElementById(‘submit‘).onclick = function(){
??var file = document.getElementById(‘fileUpload‘).files[0];
??var formData = new FormData();
??formData.append(‘name‘,‘libin‘);
??formData.append(‘userFile‘,file);
??$.ajax({
???? url: ‘http://localhost:3000/formUpload‘,
???? data: formData,
???? contentType: false,
???? processData: false,
???? type: ‘POST‘,
???? success: function (result) {
?????? console.log(result);
???? },
???? error: function (err) {
?????? console.error(err);
???? }
??});
}
</script>
</body>
</html>
js文件、图片上传（原生方法和jquery的ajax两种都有）
原文地址：https://www.cnblogs.com/xuanbingbingo/p/8608873.html