Jquery, image showing after change input - javascript

Anyone can show me what is wrong with my code? It show picture after change input but still in first input
It changes only first input everytime
Here is the code
$(document).ready(function() {
function readURL(input, data) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".active_file").change(function() {
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah' + data + '" src="#" alt="your image" />');
alert(data);
readURL(this, data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div' + data + '" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im=' + data + '><label class="col-md-12 image " for="fileI" id = "image_id' + data + '"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1">
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id="image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>
</div>
</div>
</div>

You need to use delegate event of jQuery because your DOM is being updated in real time.
So instead of doing:
$(".active_file").change(function() {
do this
$(document).on('change', '.active_file', function(){
$(document).ready(function(){
function readURL(input,data) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).on('change', '.active_file', function(){
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah'+data+'" src="#" alt="your image" />');
alert(data);
readURL(this,data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div'+data+'" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='+data+'><label class="col-md-12 image " for="fileI" id = "image_id'+data+'"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1" >
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id = "image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>
</div>
</div>
</div>

Related

Delete image preview before upload

I am uploading multiple images and showing preview, it is working fine. When I want to delete a particular preview image the preview image is deleted but when I upload all the files are uploading. Please check.
My form:
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5">
Upload a file(.csv,.xls,.xlsx)
</div>
<div class="col-sm-12 col-md-6 col-lg-7">
<input type="file" class="form-control" id="gallery-photo-add" name="projectfile[]" multiple>
<div class="gallery">
</div>
</div>
</div>
</div>
Javascript
$(function() {
var imageArray = [];
var imagesPreview = function(input, placeToInsertImagePreview) {
var data = '';
if (input.files) {
var filesAmount = input.files.length;
for (let i = 0; i < filesAmount; i++) {
data +='<li>'+ input.files[i].name + '</li>';
var reader = new FileReader();
reader.onload = function(event) {
var image = '<a class="delete" data-value='+ i +'><img class="images" src='+ event.target.result +'><i class="fas fa-times closeicon" aria-hidden="true"></i> </a>';
$($.parseHTML(image))
.appendTo(placeToInsertImagePreview);
}
// console.log(input.files);
reader.readAsDataURL(input.files[i]);
imageArray.push(input.files[i]);
console.log(imageArray);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
$("div.gallery").on('click','.delete',function(){
// console.log($(this).data("value"));
$(this).remove();
imageArray.splice($(this).data("value"),1);
console.log(imageArray);
});
});
Multiple input type file return a read-only fileList. It contains a collection of File objects. Therefore u can't simply remove an element from this list.
You have to use AJAX to handling the Form. Referthis question.

How to pass a input text content to a variable

I'm using the Unsplash API in order to input some keywords and then retrieve photos related to those keywords. In order to do that, I'm using the following Javascript:
var APIKey = '{mykey}';
$.getJSON('https://api.unsplash.com/search/photos?query=' + search + '&per_page=19&client_id=' + APIKey, function (data) {
console.log(data);
var imageList = data.results;
$.each(imageList, function (i, val) {
var image = val;
var imageURL = val.urls.regular;
var imageWidth = val.width;
var imageHeight = val.height;
if (imageWidth > imageHeight) {
$('#output').append('<div class="image"><img src="' + imageURL + '"></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<form class="form-inline" method="post">
<div class="form-group mx-auto my-5">
<input type="text" class="form-control" id="search" placeholder="Search..." name="search">
<button class="btn btn-primary" type="submit">Procurar</button>
</div>
</form>
</div>
<div id="output"></div>
What I'm trying to do is use this input text and this button in order to change the value of the variable search which is on the URL.
I'm new with javascript but I think that what I'm missing is some jQuery syntax.
You need to:
1) Prevent page reload/submitting the form when clicking the button. You can remove the form element as you don't need to refresh the page but get the input text input or keep the form and change the input type from submit to a button one.
2) Hook on the button click event and then execute your GET request to unsplash api.
3) Put this event handler in a document ready event handler so it can trigger when you click the button.
4) Do your magic :)
I hope it helps. Try the snippet below with your API key.
var APIKey = "{mykey}";
$(document).ready(function() {
$("#searchBtn").on("click", function() {
var searchQuery = $("#search").val();
getJson(searchQuery);
});
});
function getJson(search) {
$.getJSON(
"https://api.unsplash.com/search/photos?query=" +
search +
"&per_page=19&client_id=" +
APIKey,
function(data) {
console.log(data);
var imageList = data.results;
$.each(imageList, function(i, val) {
var image = val;
var imageURL = val.urls.regular;
var imageWidth = val.width;
var imageHeight = val.height;
if (imageWidth > imageHeight) {
$("#output").append(
'<div class="image"><img src="' + imageURL + '"></div>'
);
}
});
}
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<form class="form-inline" method="post">
<div class="form-group mx-auto my-5">
<input type="text" class="form-control" id="search" placeholder="Search..." name="search">
<button id="searchBtn" class="btn btn-primary" type="button">Procurar</button>
</div>
</form>
</div>
<div id="output"></div>

Set input value in form from another Input , dynamically

I trying to upload image to website with its title . I want user to see image before uploading .
HTML
<div class="container">
<h1>Image Uploader</h1>
<input type="file" name="images[]" id="images" multiple>
<br>
<div id="images-to-upload" class="row">
</div>
<br>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
When user select some images , Jquery add image with form in DIV .
Jquery
<script>
var fileCollection = new Array();
$('#images').on('change', function(e) {
var files = e.target.files;
$.each(files, function(i, file) {
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var template = '<form enctype="multipart/form-data" class="upload_form col-md-6 col-xs-12" action="/upload">' +
'<img id="img_xx" name="images" class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="number" name="table" id="table" >' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="file" name="images" value="' + e.target.result + '" >' +
'<button style="margin:0px 5px 0px 5px; width:95px" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">Upload</button>' +
'<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
'<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
'</form>';
$('#images-to-upload').append(template);
};
});
});
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var formdata = new FormData(this);
$form = $(this);
var request = new XMLHttpRequest();
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
$form.on('click', '.remove_form', function() {
console.log("Cancel");
alert("hello");
$(this).hide();
});
});
$("#upload_button").on('click', function(event) {
event.preventDefault();
$(".submit_form").click();
});
</script>
My problem is how i set value of input from FileReader , so image can be send in form data . I tried below method but its not working.
$(document).on('submit','form',function(e){
e.preventDefault();
//this form index
var index = $(this).index();
var formdata = new Formdata($(this)[0]); //direct form not object
//append the file relation to index
formdata.append(fileCollection[index]);
var request = new XMLHttpRequest();
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
});
maybe this can help you.
<div class="container">
<h1>Image Uploader</h1>
<input id="fileItem" type="file" name="images[]" id="images" multiple>
<br>
<div id="images-to-upload" class="row">
</div>
<br>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
Javascript
$('#upload_button').click(function(){
var files = document.getElementById('fileItem').files;
console.log(files)
$.each(files, function(index, item) {
//console.log(index, item);
console.log(item.name);
// here you can do anything with name of file.
// maybe here you can create your form
});
});
test it jsfiddle

Multiple form upload data is mixing with each other

I created an image website. I want users to be able to upload images with titles.
var fileCollection = new Array();
$('#images').on('change', function(e) {
var files = e.target.files;
$.each(files, function(i, file) {
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var template = '<form class="upload_form col-md-6 col-xs-12" action="/upload">' +
'<img class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="number" name="table" id="table" >' +
'<button style="margin:0px 5px 0px 5px; width:95px" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">Upload</button>' +
'<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
'<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
'</form>';
$('#images-to-upload').append(template);
};
});
});
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var index = $(this).index();
var formdata = new FormData($(this)[0]);
$form = $(this);
formdata.append('images', fileCollection[index]);
var request = new XMLHttpRequest();
// progress complete load event
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
});
$("#upload_button").on('click', function(event) {
event.preventDefault();
$(".submit_form").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Image Uploader</h1>
<input type="file" name="images[]" id="images" multiple>
<div id="images-to-upload" class="row"></div>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
When a user uploads multiple images the titles are mixed up with each other. For example, image_1 title gets set on image_2 and vice versa. Is there any way I can loop the form so they upload one by one?

multiuploading with javascript and php

With this code, I have succeed multiuploading from desktop. But the same script doesn't upload any images from a mobile phone. What could be wrong? Is there anyone who is a javascript master who knows a solution for multiuploading from mobile phones? I am not a very good javascript developer and I can not find a solution for this problem. Is there something special I need to do for javascript mobile uploads?
//upload
var abc = 0;
$(document).ready(function() {
$('#add_more').click(function() {
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append(
$("<input/>", {
name: 'file[]',
type: 'file',
id: 'file'
}),
$("<br/><br/>")
));
});
$('body').on('change', '#file', function() {
if (this.files && this.files[0]) {
abc += 1;
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: 'x.png',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
}));
}
});
//To preview image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name) {
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="flag">
<form id="skickanytt" action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Titel:</label>
<input type="text" name="title" class="form-control" placeholder="Enter a title" />
</div>
<div class="form-group">
<label>Message:</label>
<textarea class="form-control" rows="3" name="content" placeholder="Enter content"></textarea>
</div>
<div class="form-group">
<label>Image:</label>
<div id="filediv"><input name="file[]" type="file" id="file" /></div><br/> </div>
<h5><b> Label question?</b></h5>
<label><input type="radio" id="radioinput1" value="radioinput1" name="readornot">1</input></label>
<label><input type="radio" id="radioinput2" value="radioinput2" name="readornot" >2</input></label>
<br>
<button type="submit" name="submit" class="btn btn-success">submit</button>
<input type="button" id="add_more" class="upload" value="Add more images" />
Avbryt
</form>
</div>
</div>

Categories