Weet iemand hoe je eenvoudig een afbeelding kunt uploaden en deze op de pagina kunt weergeven.
Dit is wat ik zoek.
- Gebruiker(mij) kiest een afbeelding
- De pagina geeft de afbeelding weer zonder de pagina te vernieuwen of naar een ander bestand te gaan.
- meerdere
<img src>zijn voldoende omdat ik een ander afbeeldingsformaat moet weergeven.
Dit was mijn code. (Een deel ervan is bewerkt. Ik heb het van hier)
<style>
/* Image Designing Propoerties */
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<script type="text/javascript">
/* The uploader form */
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
$('#yourImage').attr('src', e.target.result);
};
</script>
<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=200 width=100>
Antwoord 1, autoriteit 100%
Hier is een eenvoudig voorbeeld zonder jQuery. Gebruik URL.createObjectURL, welke
creëert een DOMString die een URL bevat die het object vertegenwoordigt dat in de parameter wordt gegeven
Vervolgens kun je eenvoudig de srcvan de afbeelding instellen op die url:
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.querySelector('img');
img.onload = () => {
URL.revokeObjectURL(img.src); // no longer needed, free memory
}
img.src = URL.createObjectURL(this.files[0]); // set src to blob url
}
});
});<input type='file' />
<br><img id="myImg" src="#">Antwoord 2, autoriteit 18%
Probeer dit, het ondersteunt het uploaden van meerdere bestanden,
$('#multi_file_upload').change(function(e) {
var file_id = e.target.id;
var file_name_arr = new Array();
var process_path = site_url + 'public/uploads/';
for (i = 0; i < $("#" + file_id).prop("files").length; i++) {
var form_data = new FormData();
var file_data = $("#" + file_id).prop("files")[i];
form_data.append("file_name", file_data);
if (check_multifile_logo($("#" + file_id).prop("files")[i]['name'])) {
$.ajax({
//url : site_url + "inc/upload_image.php?width=96&height=60&show_small=1",
url: site_url + "inc/upload_contact_info.php",
cache: false,
contentType: false,
processData: false,
async: false,
data: form_data,
type: 'post',
success: function(data) {
// display image
}
});
} else {
$("#" + html_div).html('');
alert('We only accept JPG, JPEG, PNG, GIF and BMP files');
}
}
});
function check_multifile_logo(file) {
var extension = file.substr((file.lastIndexOf('.') + 1))
if (extension === 'jpg' || extension === 'jpeg' || extension === 'gif' || extension === 'png' || extension === 'bmp') {
return true;
} else {
return false;
}
}
Hier is #multi_file_upload de ID van het uploadveld voor afbeeldingen.
Antwoord 3, autoriteit 8%
<img id="output_image" height=50px width=50px\
<input type="file" accept="image/*" onchange="preview_image(event)">
<script type"text/javascript">
function preview_image(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output_image');
output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
Antwoord 4
<li class="list-group-item active"><h5>Feaured Image</h5></li>
<li class="list-group-item">
<div class="input-group mb-3">
<div class="custom-file ">
<input type="file" class="custom-file-input" name="thumbnail" id="thumbnail">
<label class="custom-file-label" for="thumbnail">Choose file</label>
</div>
</div>
<div class="img-thumbnail text-center">
<img src="@if(isset($product)) {{asset('storage/'.$product->thumbnail)}} @else {{asset('images/no-thumbnail.jpeg')}} @endif" id="imgthumbnail" class="img-fluid" alt="">
</div>
</li>
<script>
$(function(){
$('#thumbnail').on('change', function() {
var file = $(this).get(0).files;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.addEventListener("load", function(e) {
var image = e.target.result;
$("#imgthumbnail").attr('src', image);
});
});
}
</script>