I'm using Drag and Drop to upload images, but how can I preview my image before saving?
var obj = $('.drop');
obj.on('drop', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border',"2px dotted #bdc3c7");
var files = e.originalEvent.dataTransfer.files;
var file = files[0];
});
I've been looking around and found about FileReader but I have no idea how to implement
Please try
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<br>
<img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
</form>
And your JS part :
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
I hope it helps. Please take a look on this fiddle
Related
If I'm using img tag and after clicking simple button - image preview working:
HTML
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" /> <--- in this place img
</form>
JS
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
But when I'm trying to hide button and make image clickable (to achieve it using input type="image") preview not working, after choosing image no effect, not changing default image).
Default clickable image is like "Click here to upload photo".
HTML
<form runat="server">
<div class="thumb-preview">
<input type="image" id="blah" src="<?=path?>/images/upload.png"/> <-- input type image
<input type='file' id="imgInp" style="display: none;" />
</div>
</form>
JS
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
$("input[type='image']").click(function() {
$("input[id='imgInp']").click();
});
Have you ideas how to change the image of input type="image"?
You need to use e.PreventDefault method in your click function to to make sure your click type=image is not reloading the page every time you click on it.!
Live Demo:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function(e) {
e.preventDefault()
readURL(this);
});
$("input[type='image']").click(function(e) {
e.preventDefault()
$("input[id='imgInp']").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form runat="server">
<div class="thumb-preview">
<input type="image" id="blah" src="https://img.icons8.com/dotty/80/000000/upload.png"/>
<input type='file' id="imgInp" style="display: none;" />
</div>
</form>
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.:-)
I want to be able to preview a multiple images before it is uploaded, I found solution here that explane how to do that but for just single image.
I trying this :
function readURL(input)
{
if (input.files && input.files[0])
{
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(200)
.height(150);
};
reader.readAsDataURL(f);
}
}
}
Also, change the input to multiple
<input type='file' multiple onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
Unfortunately, not working !
How can I do this with multiple images?
With luck this will help you solve the issue 0 seems to work ok for me in test
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>multiple files preview</title>
</head>
<body>
<form method='post' enctype='multipart/form-data'>
<input type='file' name='images[]' multiple />
<input type='submit' />
<output></output>
</form>
<script>
let out=document.querySelector('output');
let oFile=document.querySelector('form > input[type="file"]');
oFile.addEventListener('change', function(e){
let oFiles=this.files;
let oReader;
for( i=0; i < oFiles.length; i++ ){
oReader = new FileReader();
oReader.addEventListener( 'load', e=>{
let img=new Image();
img.src=e.target.result;
out.appendChild( img )
});
oReader.readAsDataURL( oFiles[i] )
}
});
</script>
</body>
</html>
I am trying to make a page where Taking input from a text field, dynamically create multiple file input field. After uploading an image , the image will be previewed in the document.
HTML part
<body>
<input type="number" id="total_member" name="total_member" value="">
Go
<form id="form" runat="server">
</form>
</body>
javascript part
<script type='text/javascript'>
var input_id;
$(window).load(function(){
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#'+'target'+input_id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".image").change(function(){
var target_input = $(this).attr('id');
input_id=target_input;
readURL(this);
});
});
function memberdetails()
{
var number = document.getElementById("total_member").value;
var container = document.getElementById("form");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var image=document.createElement("img");
image.setAttribute("id","target"+i);
image.setAttribute("style","width:250px; height: 250px");
image.src="../images/default.png";
container.appendChild(image);
var file=document.createElement("input");
file.type="file";
file.setAttribute("id",i);
file.setAttribute("class","image");
container.appendChild(file);
}
}
Instead of the above HTML part if I write
<input type='file' id="1" class="image" />
<img id="target1" src="#" style="width:250px; height: 250px;" />
<input type='file' id="2" class="image" />
<img id="target2" src="#" style="width:250px; height: 250px;" />
Then these two sections work. The input fields which is created by js doesn't work.What's the problem?
Hi in the below code I am going to upload the image using following java script function.for the first input working fine.In the same way how to call second input field when I am passing the id it's got changes the first one and second one images are displaying same.
html
<div class="person_pic">
<label>Please upload your photo</label><input type='file' name="image" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</div>
<div class="person_pic">
<label>Please upload your family photo</label>
<input type='file' name="image" onchange="readURL(this);" />
<img id="blah1" src="#" alt="your image" />
</div>
javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah1')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
You can try passing the id of the img element that you want to change.As you are using $('#blah') for both the function call , hence both the time same image is being displayed.You can do this:
<script>
function readURL(input,x) {
if (input.files && input.files[0]) {
var reader = new FileReader();
x = '#'+x;
reader.onload = function (e) {
$(x)
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<div class="person_pic">
<label>Please upload your photo</label>
<input type='file' name="image" onchange="readURL(this,'blah');" />
<img id="blah" src="#" alt="your image" />
</div>
<div class="person_pic">
<label>Please upload your family photo</label>
<input type='file' name="image" onchange="readURL(this,'blah1');" />
<img id="blah1" src="#" alt="your image" />
</div>