使用jquery的file提交文件上傳
我們都知道ajax不能傳遞文件，但是html新出的一個formdata可以。我首先想到的就是這個方法
點擊提交上傳代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="upfile" id="upfile"/>
<button class="btn">提交</button>
<script>
$(function () {
$(".btn").click(function(){
var formData = new FormData();
// console.log($("#upfile")[0].files[0]);
formData.append("files", $("#upfile")[0].files[0]);
// console.log(formData.get('files'));
$.ajax({
url: 'http://xmt.wingoi.com:8090/FH_AM6/api/fileUpload/upload',
data: formData,
type: "post",
dataType: 'json',
cache : false,
contentType : false,
processData : false,
success: function(data) {
console.log(data);
console.log(data.url);
},
error:function () {
console.log("獲取失敗")
}
})
});
})
</script>
</body>
</html>
選擇文件後直接上傳：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="upfile" id="upfile"/>
<script>
//創建fileLoad方法用來上傳文件
function fileLoad(ele) {
//創建一個formData對象
var formData = new FormData();
//獲取files
var files = $(ele)[0].files[0];
//將 files 添加到formData中，鍵值對形式
formData.append("files", files);
// console.log(files)
// console.log(formData.get('files'));
$.ajax({
url: 'http://xmt.wingoi.com:8090/FH_AM6/api/fileUpload/upload',
data: formData,
type: "post",
dataType: 'json',
cache : false,
contentType : false,
processData : false,
success: function(data) {
console.log(data);
console.log(data.url);
},
error:function () {
console.log("獲取失敗")
}
})
}
$(function () {
var $input = $("#upfile");
// ①爲input設定change事件
$input.change(function () {
// ②如果value不爲空，調用文件加載方法
if($(this).val() != ""){
fileLoad(this);
}
})
})
</script>
</body>
</html>