简单实现jQuery和Ajax的图片/文件上传与下载
1,上传图片
这两句句是必须的
processData: false,//不处理
contentType: false,//非默认
实现代码"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#uploadForm").submit(function(e) {
e.preventDefault();
var formData = new FormData();
var imageFile = $("#image")[0].files[0];
formData.append("Appname", "444");//一些参数
formData.append("PageName", "444");
formData.append("language", "444");
formData.append("ImageName", "444");
formData.append("file", imageFile);
$.ajax({
url: "http://localhost:44341/imageapi/api/v3/Image/UploadImage",
// url: "http://192.168.110.159:7400/ImageApi/api/v3/Image/UploadImage",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 处理上传成功的响应
console.log("欧克"+response);
},
error: function(xhr, status, error) {
// 处理上传失败的情况
console.log("Error:", error);
}
});
});
});
</script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="image">
<button type="submit">上传图片</button>
</form>
</body>
</html>
2.图片下载显示
如果后端传的是文件流,需要将数据解释为二进制大对象(blob)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下载并显示图片示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#downloadButton").click(function() {
var formData = new FormData();
formData.append("Appname", "444");//一些参数
formData.append("PageName", "444");
formData.append("language", "444");
formData.append("ImageName", "444");
$.ajax({
url: "http://localhost:44341/ImageApi/api/v3/Image/DownloadImage",
type: "POST", // 使用POST方法，同时发送FormData
data: formData,
processData: false,
contentType: false,
xhrFields: {
responseType: "blob" //二进制
},
success: function(response) {
// 创建一个 Blob 对象的 URL，以便设置给 <img> 标签的 src 属性
var imageURL = URL.createObjectURL(response);
$("#downloadedImage").attr("src", imageURL);
console.log(response.type);
console.log(response);
},
error: function(xhr, status, error) {
// 处理下载失败的情况
console.log("Error:", error);
}
});
});
});
</script>
</head>
<body>
<button id="downloadButton">下载并显示图片</button>
<br>
<img id="downloadedImage" alt="下载的图片">
</body>
</html>
文件同理
