如何在使用 jQuery 上传图片之前预览图片
答案:使用JS readAsDataURL()方法
您可以使用 FileReader 对象的 JavaScript readAsDataURL() 方法来读取指定文件的内容。 当读取操作完成后，readyState 变为 DONE，并触发 loadend。 FileReader result 属性返回文件的内容。
让我们尝试以下示例，该示例演示如何使用此方法读取图像文件并在将其上传到服务器之前在浏览器中预览。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 在上传之前预览图像</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<form action="confirmation.html" method="post">
<p>
<input type="file" name="photo" onchange="previewFile(this);" required>
</p>
<img id="previewImg" src="/examples/images/transparent.png" alt="Placeholder">
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>我们使用 1x1 像素的透明图像作为预览图像的占位符。 这是为了防止浏览器显示不存在的图像的默认图像占位符。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
