简单实现jQuery和Ajax的图片/文件上传与下载

听我俩天

已于 2023-08-31 14:59:47 修改

阅读量793

点赞数 1

文章标签： html5 前端

于 2023-08-31 14:57:26 首次发布

本文链接：https://blog.csdn.net/CSDN2016DDDD/article/details/132603134

版权

简单实现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>