Javascript 从文件上载设置div背景图像

我有一个可以上传图片的表单：-）

当我选择要上传的图像时，是否可以将图像的白色区域设置为背景图像，并删除文本“选择图像”

代码：

$（“输入[name='FileOne']”）。在（“更改”上，函数（event1）{
src1=URL.createObjectURL（event1.target.files[0]）；
document.getElementById（“FileOne”）.style.backgroundImage='url（'+src1+'）；
});
.form文件上载容器{
浮动：左；
宽度：100%；
边缘底部：12px；
利润上限：12像素
}
@介质（最小宽度：640像素）{
.form文件上载容器{
边缘底部：20px；
利润上限：20px
}
}
.表格文件上载{
位置：相对位置；
浮动：左；
宽度：48.5%；
高度：自动；
保证金权利：3%；
利润率下限：3%
}
@介质（最小宽度：450px）{
.表格文件上载{
宽度：31.3333%
}
}
@介质（最小宽度：750px）{
.表格文件上载{
宽度：22.75%
}
}
@介质（最小宽度：1600px）{
.表格文件上载{
宽度：14.1666667%；
保证金权利：2%
}
}
.form文件上载：第n个子项（2n）{
右边距：0
}
@介质（最小宽度：450px）{
.form文件上载：第n个子项（2n）{
保证金权利：3%
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（2n）{
保证金权利：2%
}
}
@介质（最小宽度：450px）{
.form文件上载：第n个子项（3n）{
右边距：0
}
}
@介质（最小宽度：750px）{
.form文件上载：第n个子项（3n）{
保证金权利：3%
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（3n）{
保证金权利：2%
}
}
@介质（最小宽度：750px）{
.form文件上载：第n个子项（4n）{
右边距：0
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（4n）{
保证金权利：2%
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（6n）{
右边距：0
}
}
.form文件上载内部{
宽度：100%；
身高：0；
填充顶部：133.33333%
}
.form文件上载标签{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：白色；
z指数：2；
光标：指针；
边框：1px实心#AFB4；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
颜色：#AFB4；
-webkit过渡：背景轻松0.2秒，边框轻松0.2秒；
-moz过渡：背景0.2s缓变，边框0.2s缓变；
-o型过渡：背景0.2秒缓和，边框0.2秒缓和；
过渡：背景轻松0.2秒，边框轻松0.2秒
}
.form文件上载范围{
位置：绝对位置；
最高：50%；
左：0；
宽度：100%；
字体大小：15px；
文本对齐：居中；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转换：translateY（-50%）
}
.form文件上载范围：之前{
内容：''；
背景：url（../img/image upload icon.png）无重复中心#fff；
背景：url（../img/image upload icon.svg）无重复中心#fff；
背景尺寸：65px 56px；
显示：块；
宽度：65px；
高度：56px；
保证金：0自动；
下页边距：5px
}
.form文件上载输入{
位置：相对位置；
不透明度：0；
z指数：1
}
.form文件上载。关闭{
显示：无；
位置：绝对位置；
顶部：-13px；
右：-13px；
宽度：26px；
高度：26px；
字号：18px；
文本对齐：居中；
线高：26px；
背景：白色；
z指数：3；
-webkit过渡：背景轻松0.2s，颜色轻松0.2s；
-moz过渡：背景0.2s轻松，颜色0.2s轻松；
-o过渡：背景0.2s缓变，颜色0.2s缓变；
过渡：背景轻松0.2秒，颜色轻松0.2秒
}

选择图像
你很接近了。但是您在这里选择了错误的元素：

document.getElementById("FileOne")

应该是：

document.querySelector("[for=FileOne]")

如果使用前者，将选择正确渲染为不可见的输入字段本身。您必须以要用图像填充的区域为目标。在您的情况下，
元素应该很好，因为它还定义了可单击区域。
您已经接近了。但是您在这里选择了错误的元素：

document.getElementById("FileOne")

应该是：

document.querySelector("[for=FileOne]")

如果使用前者，将选择正确渲染为不可见的输入字段本身。您必须以要用图像填充的区域为目标。在您的情况下，
元素应该很好，因为它还定义了可单击区域。
太好了！是否也可以隐藏
.form file upload span
？@michaelmcgurk当然，您可以对其应用
display:none
。但是要小心，因为在
里面有一个
，还有另一个包裹
.aah。你知道我是如何使用Javascript实现这一目标的吗？例如，
[For=FileOne]>span
可以做到。太棒了！是否也可以隐藏
.form file upload span
？@michaelmcgurk当然，您可以对其应用
display:none
。但是要小心，因为在
里面有一个
，还有另一个包裹
.aah。你知道我是如何使用Javascript实现这一目标的吗？例如，
[For=FileOne]>span
就可以做到。