javascript - 带有输入结果的 div 背景图像

Question

我正在使用这项技术:link要从本地客户端获取图像，我不想将其保存在我的服务器上。我可以(在javascript中)设置这个图像的div背景图像宽度吗？现在这是我的代码:

var input9I1 = document.createElement("input");
                            input9I1.id = "input9I1";
                            input9I1.type = "file";
                            input9I1.name = "files[]";
                            input9I1.accept = "image/*";
                            input9I1.addEventListener('change', handleFileSelect, false);
                            td20I1.appendChild(input9I1);   

所以这是输入的创建并且工作正常。现在的功能:

function handleFileSelect(evt){
imgageATraiter = evt.target.files[0];

console.log(imgageATraiter.name);
console.log(imgageATraiter.type);
console.log(imgageATraiter.size);
console.log(imgageATraiter.lastModifiedDate);
console.log(imgageATraiter.lastModifiedDate.toLocaleDateString());

document.getElementById('boite5I1').style.backgroundImage = imgageATraiter.name;}

所以我想要的是如何用我的图像修改“boite5I1”的背景？是否可以 ？感谢您阅读并祝您有美好的一天:D

Answer 1

您应该在handleFileSelect函数中尝试以下代码。

if (imgageATraiter) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('boite5I1')
                .attr('src', e.target.result)
                .width(50)
                .height(50);
        };
        reader.readAsDataURL(imgageATraiter );
    }