项目实训个人任务之部分效果实现续

最新推荐文章于 2024-10-01 17:17:19 发布

shuai200331

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量168

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/shuai200331/article/details/139900626

版权

前端图片上传

在前端实现图片上传功能，通常涉及到HTML、CSS和JavaScript（或jQuery等库）的结合使用。简单的步骤如下所示：

创建HTML表单

使用<form>元素创建一个表单，并设置enctype属性为multipart/form-data，以便能够上传文件。在表单内，使用<input type="file">元素创建一个文件选择字段。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>图片上传示例</title>  
</head>  
<body>  
  
<form id="uploadForm" enctype="multipart/form-data">  
    <input type="file" id="imageFile" name="imageFile" accept="image/*">  
    <button type="button" onclick="uploadImage()">上传图片</button>  
</form>  
  
<script src="upload.js"></script>  
  
</body>  
</html>

编写JavaScript代码

使用JavaScript（或jQuery）来处理文件选择、验证（如果需要）和上传。可以使用FormData对象来构建要发送的数据，并通过XMLHttpRequest或fetch API发送请求到服务器。

function uploadImage() {  
    var input = document.getElementById('imageFile');  
    var file = input.files[0];  
    var formData = new FormData();  
  
    formData.append('imageFile', file);  
  
    var xhr = new XMLHttpRequest();  
    xhr.open('POST', '/upload-url', true); 
    xhr.upload.onprogress = function(e) {  
        if (e.lengthComputable) {  
            var percentComplete = (e.loaded / e.total) * 100;  
            console.log(percentComplete + '% 上传完成.');  
        }  
    };  
  
    xhr.onload = function() {  
        if (this.status === 200) {  
            alert('图片上传成功！');  
        } else {  
            alert('图片上传失败！');  
        }  
    };  
  
    xhr.send(formData);  
}