jquery+预览图片代码

JQuery 是一种流行的 JavaScript 库，可用于创建交互式 Web 页面。其中一项重要功能是预览图片。预览图片可让用户在上传图片之前预览所选图片，以确保图片选择正确。在本文中，我们将介绍如何使用 JQuery 实现预览图片的功能。

$(function () {
$('#file-input').change(function () {
    var file = $(this)[0].files[0];
    var fileReader = new FileReader();
fileReader.onload = function () {
    $('#preview').attr('src', fileReader.result);
}
    ;
    fileReader.readAsDataURL(file);
}
    );
}
    );
    

以上代码使用 JQuery 监听文件输入框的变化。当文件选择发生变化时，代码使用新的 FileReader 对象读取文件并将其转换为基于 Base64 的数据 URL。然后，代码将此 URL 用作图像的源，以显示所选图像的预览。

请注意，我们使用了选择器#file-input和#preview，这意味着我们必须在 HTML 代码中定义文件输入框和图像预览。例如：

input type="file" id="file-input" />
    img id="preview" src="" />
    

请确保选择器与 HTML 标记相符合，因为选择器是代码正确工作的关键。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！