We Keep Coding

Can't get image to display via jQuery when it's being uploaded

Right now I have a url that displays an image when it's loaded. However, there will be an option for this image to be replaced via a form input. I would like the uploaded image to be displayed as soon as it's uploaded so it can be evaluated by the user.
I'm trying to accomplish this via jQuery, but I can't get it to work.
Here's my code:
HTML:
<div class="form-group">
<label for="Image">Image</label>
<input type="file" id="Image" name="Image" accept="image/*">
<img src="..\{{ workshop_info[4] }}" id="output">
</div>
JQuery:
<script>
$(document).ready(function() {
$("#Image").change(function(e){
$("#output").attr("src", e.target.files[0]);
});
});
</script>

You can do this by using FileReader functionality.
I have recreated your example which displays an image when it's loaded
Once i upload my own image by clicking choose file and selected the file. That file will be getting previewed after selection with that image load_images div i created.
As soon as the file is selected i am replace the src of your existing image to the new src which come from readAsDataURL
You can read more about FileReader here in detail.
Working Demo: https://jsfiddle.net/usmanmunir/w5cbgLsk/
Run snippet below to see it working.
$(function() {
//Preview image function
var previewImage = function(image) {
if (image.files) {
//Check all images
var filesAmount = image.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
//Replace images on form upload selected image
$('#output').attr('src', event.target.result)
}
reader.readAsDataURL(image.files[i]);
}
}
};
//Select image and call imagePreview function
$('#Image').on('change', function() {
previewImage(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="Image">Image</label>
<input type="file" id="Image" name="Image" accept="image/*">
<div class="load_images">
<img src="http://mandarinazul.co/images/mandarinas.png" id="output">
</div>
</div>

<img src="../yourimage/path/image.jpeg" onclick="previmg()" id="displayimage" />
<input type="file" class="form-control" onchange="selectedimg(this)" id="selectphoto" style="display: none" name="photo">
</div>
function previmg(){
document.querySelector('#selectphoto').click();
}
function selectedimg(e){
if(e.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.querySelector('#displayimage').setAttribute('src', e.target.result);
}
reader.readAsDataURL(e.files[0]);
}}
OR you can try this too,
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="image has to be load">
function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}}
try this, both will work charm if any doubt feel free to ask.:-)

javascript preview image before upload

I made a code in the img box in sequence. However, if the if (file.size > 1M) is large, a space occurs in the img box.
How do I get the next image to come in without spaces?
**
javascript preview image before upload
**
<form class="my_form">
<input type="file" id="fileElem" multiple accept="image/*"
onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select Images</label>
<div id="gallery">
<img id="**imgg0**" class="imgg">
<img id="**imgg1**" class="imgg">
<img id="**imgg2**" class="imgg">
<img id="**imgg3**" class="imgg">
<img id="**imgg4**" class="imgg">
</div>
</form>
<script>
function handleFiles(files) {
var files = [...files]
var imgs = document.querySelectorAll('img');
files.forEach(function(file, index){
if(file.size > 1000000){
delete file[index];
} else{
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
var img = **document.getElementById('imgg'+index)**;
img.src = reader.result;
}
}
})
}
</script>
[enter image description here][1]
[1]: https://i.stack.imgur.com/0dJ45.png

Check my solution.
function handleFiles(files) {
var imgs = document.querySelectorAll('img');
//Image element undex
let imgIndex=0;
//Loop through all the images
for(var i = 0; i < files.length; i++){
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById('imgg'+imgIndex);
img.src = e.target.result;
imgIndex++;
}
reader.readAsDataURL(files[i]);
}
}
<form class="my_form">
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select Images</label>
<div id="gallery">
<img id="imgg0" width="10%" class="imgg">
<img id="imgg1" width="10%" class="imgg">
<img id="imgg2" width="10%" class="imgg">
<img id="imgg3" width="10%" class="imgg">
<img id="imgg4" width="10%" class="imgg">
</div>
</form>

a simple solution for multi-image previews. This creates img placeholders dynamically for as many pictures selected in file control
<div id="container01"></div>
<input id="filer" type="file" onchange="preview()" multiple="multiple" />
<script>
function preview() {
var element = document.getElementById("container01");
for (var i = 0; i < event.target.files.length; i++) {
var imgi = document.createElement('img'); // variable imgi has i loop counter
imgi.src = URL.createObjectURL(event.target.files[i]);
imgi.style.width = "100px";
imgi.style.height = "100px";
element.appendChild(imgi); // add new preview to container
var space = document.createTextNode(" "); // spacer between imgs
element.appendChild(space); // add space for horizontal preview
// var linebreak = document.createElement('br'); // add line break <br/>
// element.appendChild(linebreak);
}
}
</script>

Not Able to Target Closest img Element To File Input Element

Can you please take a look at this snippet and let me know why I am not able to target the closest image element to file input
$('.file').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
$(this).closest('.img').attr('src', ev2.target.result);
$(this).find('.img').attr('src', ev2.target.result);
$(this).next('.img').attr('src', ev2.target.result);
};
fr.readAsDataURL(f);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />
As you can see I already tried
$(this).closest('.img').attr('src', ev2.target.result);
$(this).find('.img').attr('src', ev2.target.result);
$(this).next('.img').attr('src', ev2.target.result);
but it is not doing the job

you have to find img closest to the input file which changes, so you must use ev.target because inside the second function scope changes and this does not refer to file input anymore, something like this seems to work:
$('.file').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
$(ev.target).next('.img').attr('src', ev2.target.result);
};
fr.readAsDataURL(f);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />

How to display uploaded image when user clicks on a button?

I have the following line of code here which makes a user text appear upon clicking the send button (to simulate chat messages being sent)
<script>
$('#subbut').click(function(){
var user_msg = $("#user_msg").val();
$("#msg").append('<p>User says:'+user_msg+'</p>');
</script>
<body>
<div id="msg"></div>
<input type="text" name="user_msg" id="user_msg">
<input type="submit" value="Submit" id="subbut">
</body>
However I wish to do this for input of images too.
<body>
<div id="msg"></div>
<input type="file" name="newImage" id="upload-photo">
<input type="submit" value="Submit" id="subbut">
</body>
How do you access the image and append it (to display the image) to the #msg div when the #subbut button is clicked? I've looked at something similar here Preview an image before it is uploaded but I can't seem to adapt it.

<div id="image-wrapper"></div>
<input id="upload-image" type="file" accept=".jpg"/>
<input id="subbut" type="submit" value="Submit"/>
<script>
var _URL = window.URL || window.webkitURL;
$("#subbut").click(function () {
var file;
var image;
if ((file = $("#upload-image")[0].files[0])) {
image = new Image();
image.onload = function () {
$("#image-wrapper").append(this);
$(this).attr("id", "image");
}
image.src = _URL.createObjectURL(file);
}
});
</script>

<input type="file" id="inputFileToLoad" onchange="chnageimgupdate()" />
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
document.body.appendChild(imageLoaded);
};
fileReader.readAsDataURL(fileToLoad);
}
}
}

HTML multiple fileread

HTML Code:
<input type="file" name="img1" id="img1" required>
<input type="file" name="img2" id="img2">
<input type="file" name="img3" id="img3">
<input type="file" name="img4" id="img4">
jQuery Code:
for(var i = 1; i <= 4; i++){
if($("#img"+i).val() != ''){
file = document.getElementById('img' + i).files[0];
fileread(file);
}
}
function fileread(file){
var result = '';
reader = new FileReader();
reader.onload = function(){
result = reader.result;
//return result;
localStorage.setItem("lostimage1", result);
}
reader.readAsDataURL(file);
}
I want to read multiple files when user click on submit button. but it not working. How can I resolve this error? please help me.

Using Jquery and each() method I suggest this:
var checkValue;
var valueArray=[];
$('#button').on('click',function(){
$('input').each(function(){
checkValue=$(this).val();
if(checkValue===''){
return;
}
valueArray.push(checkValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="img1" id="img1" required>
<input type="file" name="img2" id="img2">
<input type="file" name="img3" id="img3">
<input type="file" name="img4" id="img4">
<button id="button">Click Me</button>

Attach click event to <input type="submit">, call event.preventDefault() to prevent <form> submission, use .each() to iterate <input type="file"> elements, pass this.files[0] to readfile function.
Adjust within FileReader load handler to not overwrite same key at localStorage.
FileReader throws an error if a Blob or File object is not passed as parameter to .readAsDataURL(), for example, ifis clicked andfilereadis called in loop and one ofelements.filesproperty doe not containFileobject inFileList. Check if element.fileshas.lengthgreater than0before callingfilereadreferencing the.files[0]property of the current` element.
$(function() {
function fileread(file, id) {
var reader = new FileReader();
reader.onload = function() {
localStorage.setItem("lostimage" + id, reader.result);
}
reader.readAsDataURL(file);
}
$("input[type=submit]").on("click", function(e) {
e.preventDefault();
$(":file[id^=img]").each(function() {
if (this.files.length) fileread(this.files[0], this.id.replace(/\D/g, ""))
})
});
});
plnkr http://plnkr.co/edit/1Sec8uWlK2pbXMTlfpCj?p=preview