Set div Hintergrundbild aus Datei lädt

Ich habe eine Form, die mir Bilder :-)Set div Hintergrundbild aus Datei lädt

hochladen können Ist es möglich, wenn ich ein Bild auswählen, hochladen, den weißen Bereich mit dem Bild setzt als Hintergrundbild & entfernt auch den Text 'Bild auswählen'.

FIDDLE

Code:

$("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>

Quelle

2016-12-05 michaelmcgurk

Sie nah dran sind. Aber Sie sind die Auswahl der falschen Element hier:

document.getElementById("FileOne")

Es sollte:

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

Wenn Sie den ehemaligen verwenden, Sie gehen in das Eingabefeld selbst wählen, dass Sie richtig haben unsichtbar gemacht. Sie müssen den Bereich auswählen, den Sie mit dem Bild füllen möchten. In Ihrem Fall sollte das Element <label> in Ordnung sein, da es auch den anklickbaren Bereich definiert.

Quelle

2016-12-05 22:21:51 MaxArt

Ausgezeichnet! https://jsfiddle.net/vafk2Lhy/1/ Ist es auch möglich, '.form-file-upload span' zu verstecken? – michaelmcgurk

@michaelmcgurk Nun, sicher, Sie können zum Beispiel 'display: none' darauf anwenden. Pass aber auf, denn es gibt eine '' innerhalb '', aber auch eine andere, die '' umschließt. – MaxArt

Aaah. Weißt du, wie ich das mit Javascript anziele? – michaelmcgurk

Set div Hintergrundbild aus Datei lädt

Antwort

Verwandte Themen