js文件、圖片上傳（原生方法和jquery的ajax兩種都有）

時間 2019-11-13

標籤文件圖片上傳原生方法 jquery ajax 兩種都有欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<input type="file" id="fileUpload">
<button id="submit">點擊上傳文件</button>javascript

<script>java

//方法一：原生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>jquery

</body>ajax

</html>

app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。