Como fazer um envio de imagem simples usando Javascript / HTML
alguém sabe como fazer um simples upload de imagem e exibi-lo na página.
É disto que estou à procura.- O Utilizador (me) irá escolher uma imagem
- a página irá mostrar a imagem sem actualizar a página ou ir para outro ficheiro.
- múltiplo {[1] } Serve porque eu preciso de mostrar Tamanho de imagem diferente.
<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>
36
3 answers
Então aqui está o meu código completo:
HTML:
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
Javascript:
<script>
function previewFile(){
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
} else {
preview.src = "";
}
}
previewFile(); //calls the function named previewFile()
</script>
56
Author: user3335903, 2017-07-27 20:45:27
Tente isto, ele suporta o envio de vários ficheiros,
$('#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;
}
}
Aqui #multi_file_upload é o ID do campo de envio da imagem.
8
Author: HB Kautil, 2016-03-05 05:41:04
Aqui está um exemplo simples, sem perguntas. Você pode usar
URL.createObjectURL
, que
Cria um DOMString contendo um URL que representa o objecto indicado no parâmetro
Então, você pode simplesmente definir o src
da imagem para esse url, e a imagem irá carregar.
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.querySelector('img'); // $('img')[0]
img.src = URL.createObjectURL(this.files[0]); // set src to file url
img.onload = imageIsLoaded; // optional onload event listener
}
});
});
function imageIsLoaded(e) { alert(e); }
<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>
6
Author: clabe45, 2018-10-10 23:12:35