从文件输入更改图像而不发送表单 [英] Change an image from a File input without sending the form

问题描述

兄弟姐妹.

是否有一种方法可以将HTML中的IMG更改为使用img的src，而不将包含IMG的表单发送给php，而将输入文件标签中的选定图像用作img的src?

Is there a way to change an IMG on HTML using as a src of the img a selected image from an input file tag without sending the form containing the IMG to the php ?

我要做的就是在发送php上的设置以保存用户个人资料之前，先在页面上查看图像的预览.

All I want to do is to see the preview of the image on the page before sending the settings on php to save the profile of the user.

谢谢.

推荐答案

对于现代浏览器，您可以使用 FileReader API :

var inp = document.querySelector('input');
inp.addEventListener('change', function(e){
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(){
        document.getElementById('preview').src = this.result;
        };
    reader.readAsDataURL(file);
    },false);

<input type="file" accept="image/*"/>
<img id="preview"/>

这篇关于从文件输入更改图像而不发送表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！