1
私は、アップロードするイメージで背景イメージを置き換えるスクリプトを用意しています。ファイルのアップロード時にスパン要素を非表示にする
ここに例があります：DEMOです。
しかし、スパン（.form-file-upload span）を隠して、イメージ全体にその醜い白いブロックがないようにしたいと思います。これはどうすればいいですか？
は、ここに私の現在のコードです：ファイルが選択されている場合
$("input[name='FileOne']").on("change", function(event1) {
\t src1 = URL.createObjectURL(event1.target.files[0]);
\t document.querySelector("[for=FileOne]").style.backgroundImage = 'url('+src1+')';
});.form-file-upload-container {
float: left;
width: 100%;
margin-bottom: 12px;
margin-top: 12px
}
@media (min-width: 640px) {
.form-file-upload-container {
margin-bottom: 20px;
margin-top: 20px
}
}
.form-file-upload {
position: relative;
float: left;
width: 48.5%;
height: auto;
margin-right: 3%;
margin-bottom: 3%
}
@media (min-width: 450px) {
.form-file-upload {
width: 31.3333%
}
}
@media (min-width: 750px) {
.form-file-upload {
width: 22.75%
}
}
@media (min-width: 1600px) {
.form-file-upload {
width: 14.1666667%;
margin-right: 2%
}
}
.form-file-upload:nth-child(2n) {
margin-right: 0
}
@media (min-width: 450px) {
.form-file-upload:nth-child(2n) {
margin-right: 3%
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(2n) {
margin-right: 2%
}
}
@media (min-width: 450px) {
.form-file-upload:nth-child(3n) {
margin-right: 0
}
}
@media (min-width: 750px) {
.form-file-upload:nth-child(3n) {
margin-right: 3%
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(3n) {
margin-right: 2%
}
}
@media (min-width: 750px) {
.form-file-upload:nth-child(4n) {
margin-right: 0
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(4n) {
margin-right: 2%
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(6n) {
margin-right: 0
}
}
.form-file-upload-inner {
width: 100%;
height: 0;
padding-top: 133.33333%
}
.form-file-upload label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 2;
cursor: pointer;
border: 1px solid #AFAFB4;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #AFAFB4;
-webkit-transition: background 0.2s ease, border 0.2s ease;
-moz-transition: background 0.2s ease, border 0.2s ease;
-o-transition: background 0.2s ease, border 0.2s ease;
transition: background 0.2s ease, border 0.2s ease
}
.form-file-upload span {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 15px;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%)
}
.form-file-upload span:before {
content: '';
background: url(../img/image-upload-icon.png) no-repeat center center #fff;
background: url(../img/image-upload-icon.svg) no-repeat center center #fff;
background-size: 65px 56px;
display: block;
width: 65px;
height: 56px;
margin: 0 auto;
margin-bottom: 5px
}
.form-file-upload input {
position: relative;
opacity: 0;
z-index: 1
}
.form-file-upload .close {
display: none;
position: absolute;
top: -13px;
right: -13px;
width: 26px;
height: 26px;
font-size: 18px;
text-align: center;
line-height: 26px;
background: white;
z-index: 3;
-webkit-transition: background 0.2s ease, color 0.2s ease;
-moz-transition: background 0.2s ease, color 0.2s ease;
-o-transition: background 0.2s ease, color 0.2s ease;
transition: background 0.2s ease, color 0.2s ease
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-file-upload">
<div class="form-file-upload-inner">
<label for="FileOne"><span>Select Image</span></label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileOne" size="40" class="wpcf7-form-control wpcf7-file" id="FileOne" aria-invalid="false" /></span><button class="close" type="button"></button>
</div>
</div>
を削除する場合は、ファイルを検索し、この作品は、IFう私のフォームには複数のファイルフィールドがありますか？ – michaelmcgurk
私は答えで複数のアップロードを更新しました。これは、画像アップロードの複数のセットを持っている場合でも動作します – jafarbtech
そのような素敵でクリーンなソリューション - ありがとう、@ jafarbtech： - D – michaelmcgurk