JavaScript实现头像上传并预览提交
在用户注册账号或者修改资料的时候，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。
这里介绍的是直接在本地内存中预览图片，用户确认提交后再上传至服务器保存这种方法。这种方法可以减少服务器资源的浪费，同时也可以提高用户体验。
在这个示例中，我们使用HTML、CSS和JavaScript来实现头像上传和预览。首先，我们需要在HTML中创建一个文件上传表单，并添加一个文件输入框和一个预览区域。然后，我们使用JavaScript来获取文件输入框中的文件，并将其预览在预览区域中。当用户确认提交后，我们将文件上传到服务器保存。
HTML代码如下所示：
```
<div class="reHead">
<P class="content-format">头像支持jpg、png、jpeg格式，文件大小最大不能超过1M</P>
<div class="content">
<form method="post" enctype="multipart/form-data" id="file_upload" class="headForm">
<div id="test-image-preview" class="iconfont icon-bianjitouxiang">
<input type="file" name="test" id="test-image-file" class="fileHead" accept="image/gif,image/jpeg,image/png,image/jpg" multiple="multiple">
</div>
<div class="headMain">
<span class="file">上传文件</span>
<p id="test-file-info" class="fileName"></p>
</div>
</form>
</div>
<div class="but">
<button class="orangeHead" id="upImgSub"><a href="" title="编辑资料" target="_blank">保存</a></button>
</div>
</div>
```
JavaScript代码如下所示：
```
<script type="text/javascript" src="./jquery.min.js"></script>
<script>
var fileInput = document.getElementById('test-image-file');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
document.getElementById('test-image-preview').innerHTML = '';
document.getElementById('test-image-preview').appendChild(img);
};
reader.readAsDataURL(file);
});
</script>
```
在这个示例中，我们使用了FileReader API来预览图片，并使用了JavaScript来获取文件输入框中的文件，并将其预览在预览区域中。当用户确认提交后，我们将文件上传到服务器保存。
这个示例中，我们使用了HTML、CSS和JavaScript来实现头像上传和预览。这种方法可以减少服务器资源的浪费，同时也可以提高用户体验。
知识点：
1. 文件上传：使用HTML的文件上传表单和JavaScript的FileReader API来实现文件上传。
2. 图片预览：使用JavaScript的FileReader API来预览图片，并将其渲染在HTML页面中。
3. 服务器保存：使用JavaScript的XMLHttpRequest或Fetch API来将文件上传到服务器保存。
4. 浏览器兼容性：需要考虑浏览器的兼容性问题，例如，使用FileReader API可能需要在现代浏览器中使用。
5. 用户体验：需要考虑用户体验的问题，例如，预览图片的大小和质量，上传文件的进度条等。
这个示例中，我们使用了HTML、CSS和JavaScript来实现头像上传和预览，并且考虑了服务器资源的浪费和用户体验的问题。
我的内容管理
展开
