Question

兄弟姐妹。

有没有办法在输入文件标签中使用img选择图像作为src更改HTML上的IMG而不将包含IMG的表单发送到php？

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

提前致谢。

Answer 1

blueimp有一个很棒的库可以满足您的需求。您只需要导入库：

<script src="js/load-image.all.min.js"></script>

并为所需输入的[onchange event] [4]设置一个事件处理程序，如下所示：

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600}
    );
    if (!loadingImage) {
        // Alternative code ...
    }
};

第一个参数是一个文件或Blob对象，或者只是一个图像URL，第二个是一个回调，如果一切正确，它将接收一个HTML图像元素，你可以调整大小，裁剪或操纵返回的对象作为第三个选项loadImage函数的参数。

在此示例中，e.target是对调度事件的对象的引用。看看File API。

重要说明：对于File或Blob对象作为第一个参数，仅当浏览器支持URL API或FileReader时才有效。

查看回购以获取更多信息：blueimp/JavaScript-Load-Image

Answer 2

好吧，我正在搜索你的问题，发现了这个：

首先，你需要阅读<input type="file">所以这个参考将帮助你需要这个：Reading client side text file using Javascript，在这里他们读取输入并在DOM中写入canvas标签，所以你需要这个line：document.getElementById('file').addEventListener('change', readFile, false);
同样在readFile函数中，您需要将文件的src分配给<img>标记，例如：

function readFile（evt）{ var files = evt.target.files; var file = files [0]; var img = document.getElementById（'myimg'）; img.src = file.src; }

进行一些测试并告诉我是否有效。

Answer 3

textinput = TextInput(text="Open source Python library for rapid development of applications that make use of innovative user interfaces, such as multi-touch apps")

jsfiddle：https://jsfiddle.net/913bnkyq/

检查jsfiddle中dev工具中的img元素，看看在输入时输入的src属性是否实时更新。

Answer 4

对于modern browsers，您可以使用FileReader API：

＆＃13;

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);

＆＃13;

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

＆＃13;

从文件输入更改图像而不发送表单

4 个答案: