HTML5+JS实现简单的图片上传预览

1. HTML5+JS实现简单的图片上传预览

HTML5的发展使得前端变得更加强大，其中图片上传预览是十分常见的需求。在本文中，我们将介绍如何使用HTML5和JavaScript实现图片上传预览功能。

1.1 HTML5的File API

HTML5的File API是一组用于读取文件的API，其中包含的FileReader对象可以用来异步读取文件内容。

File API允许我们读取用户选择的文件。通过下面的代码：

var inputFile = document.getElementById("fileInput");  
var file = inputFile.files[0];  

可以获取到用户在界面中选择的文件。

1.2 使用DataURL

DataURL是一种类似于链接的协议，可以将数据以文本字符串的形式进行编码。通过使用DataURL，可以将文件转换为Base64编码的字符串，并将其作为img标签的source属性，用来预览图片。

以下是一段可以将图片文件读取为DataURL字符串的代码：

var reader = new FileReader();  
reader.readAsDataURL(file);  
reader.onload = function(){  
    document.getElementById("preview").src = reader.result;  
}  

在代码中，使用FileReader对象的readAsDataURL()方法将文件读取为DataURL字符串，在onload事件中将其赋值给img标签的source属性。这样用户选择的图片就可以在页面中进行预览了。

2. 代码实现

下面是一个简单的实现文件上传预览的HTML代码：

<input type="file" id="fileInput" name="fileInput" onchange="previewImage();" />  
<img id="preview" src="" alt="预览图">

其中，input标签被用来选择文件，onchange事件会触发previewImage()函数，函数的实现如下：

function previewImage() {  
    var fileInput = document.getElementById('fileInput');  
    var preview = document.getElementById('preview');  
    if (fileInput.files && fileInput.files[0]) {  
        var reader = new FileReader();  
        reader.readAsDataURL(fileInput.files[0]);  
        reader.onload = function(e) {  
            preview.src = e.target.result;  
        }  
    }  
}  

这段代码会检查用户是否选择了任何文件，若选择了则创建一个FileReader对象，使用readAsDataURL()方法读取文件，并将DataURL字符串赋值给img标签的source属性，从而完成文件上传预览效果。

3. 总结

本文介绍了如何使用HTML5和JavaScript实现文件上传预览功能。通过File API，我们可以获取到用户选择的文件，通过DataURL我们可以将文件转换为Base64编码的字符串，并可通过img标签进行预览。

对于文件上传预览而言，实现起来并不复杂，但可以有效地提升用户体验，降低用户使用成本。