Saya telah menyesuaikan tombol unggah formulir saya dan menyembunyikan bidang input melalui css display:none tetapi ketika saya memilih gambar, input tidak menampilkan teks pratinjau!
Saya ingin menampilkan teks pratinjau gambar yang dipilih sehingga pengguna tahu bahwa dia telah memilih gambar!
HTML:
<div class="form-group">
<label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
<input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image">
<span>No file chosen</span>
</div>
CSS:
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
input[type=file] {
display: none;
}
input[type=file]{
display:none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<div class="form-group">
<label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
<input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image"> <span>No file chosen</span>
</div>PERBARUI: Saya mencoba semua solusi ini (Bagaimana cara menampilkan nama file untuk file input gaya khusus menggunakan jquery?) tetapi tidak ada yang berhasil untuk saya. Dalam skenario saya, saya memiliki dua tombol unggah satu adalah before image upload dan yang kedua adalah after image upload seperti yang ditunjukkan dalam video.
Tetap saja saya tidak dapat menampilkan teks pratinjau di depan tombol unggah.
2 jawaban
Cukup tambahkan fungsi baru di file tipe input pada acara onchange. Silakan temukan kode terlampir.
input[type=file]{
display:none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<div class="form-group">
<label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
<input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image" onChange="((e)=>{
file = e.target.files.item(0);
var fr = new FileReader;
fr.onloadend =(imgsrc)=>{
imgsrc = imgsrc.target.result; // file reader
var img = document.createElement('img');
img.src =imgsrc;
this.nextSibling.nextSibling.innerHTML='';
this.nextSibling.nextSibling.appendChild(img);
};
fr.readAsDataURL(file);
})(event)">
<span>No file chosen</span>
</div>Ini tidak berfungsi karena <span>No file chosen</span> Anda statis.
Mencoba:
<div class="form-group">
<label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
<input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image">
<span id="images"></span>
</div>
<script type="text/javascript">
var field = document.getElementById('before_image');
var span = document.getElementById('images');
field.addEventListener('change', function() {
var img = document.createElement('img');
img.src = field.files[0].getAsDataURL();
span.appendChild(img);
});
</script>