Установить ДИВЫ фоновое изображение из файла загрузить

У меня есть форма, которая позволяет мне загружать изображения :-)Установить ДИВЫ фоновое изображение из файла загрузить

Можно ли, когда я выбираю изображение для загрузки, он устанавливает белую область с изображением в качестве фонового изображения & также удаляет текст «Выбрать изображение».

FIDDLE

Код:

$("input[name='FileOne']").on("change", function(event1) { 
 
     \t src1 = URL.createObjectURL(event1.target.files[0]); 
 
     \t document.getElementById("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>

источник

2016-12-05 michaelmcgurk

Вы близки. Но вы выбираете неправильный элемент здесь:

document.getElementById("FileOne")

Оно должно быть:

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

Если вы используете бывший, вы собираетесь выбрать поле ввода самого, что вы правильно невидимый. Вы должны настроить таргетинг на область, которую хотите заполнить изображением. В вашем случае элемент <label> должен быть точным, так как он также определяет зону с возможностью клика.

источник

2016-12-05 22:21:51 MaxArt

Отлично! https://jsfiddle.net/vafk2Lhy/1/ Можно ли также спрятать '.form-file-upload span'? – michaelmcgurk

@michaelmcgurk Ну, конечно, вы можете применить «display: none» к нему, например. Остерегайтесь, потому что есть '' внутри '', а также еще один, который обертывает ''. – MaxArt

Aaah. Вы знаете, как я нацелен на использование Javascript? – michaelmcgurk

Установить ДИВЫ фоновое изображение из файла загрузить

ответ

Смежные вопросы