function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { input.parentNode.innerHTML = '<img src="' + e.target.result + '" alt="照片">'; } reader.readAsDataURL(input.files[0]); } }
时间: 2024-02-14 12:20:15 浏览: 140
input type=file 选择图片并且实现预览效果的实例
5星 · 资源好评率100%
这段代码实现了一个预览图片的功能。当用户选择一张图片后,会调用previewImage函数,参数input表示文件选择表单元素。该函数通过FileReader对象读取选中的图片文件,当读取完成后,将图片显示在input元素的父元素中。具体实现是通过设置img元素的src属性为FileReader对象读取到的数据URL,从而显示图片。需要注意的是,该函数只是实现了前端预览图片的功能,并没有将图片上传到服务器。如果需要上传图片,还需要编写上传图片的代码。
阅读全文