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>
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>
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?
I create script for show image until upload , how i use 5 input files for upload , the script must let show one image , or preview image for each input file
The Script :
<script>
function handleFileSelect(evt,ids) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('list'+ids).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
///alert("ok"+ids);
};
})(f);
reader.readAsDataURL(f);
}
</script>
HTML CODE
<input type="file" id="files2" />
<output id="list2"></output>
CALLING SCRIPT FOR THIS INPUT FILE ID
<script>
document.getElementById('files2').addEventListener('change', function(){handleFileSelect('','2');},false);
</script>
As you can see i try send vars from handleFileSelect('','2') , but don´t works never and i think the code it´s well , but sure i forget something , i hope here can help me in this issue , thank´s community
The Best Regards
Try this code
$(function () {
var _URL = window.URL || window.webkitURL;
$(".UploadImage").on("change", function () {
var preview = $(this).attr("data-img");
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
document.getElementById(preview).src = _URL.createObjectURL(file);
};
img.src = _URL.createObjectURL(file);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="file" data-img="preview1" class="UploadImage" />
<img src="" id="preview1"/>
</div>
<div>
<input type="file" data-img="preview2" class="UploadImage" />
<img src="" id="preview2"/>
</div>
<div>
<input type="file" data-img="preview3" class="UploadImage" />
<img src="" id="preview3"/>
</div>
<div>
<input type="file" data-img="preview4" class="UploadImage" />
<img src="" id="preview4"/>
</div>
It's better if you use CreateObjectURL instead (saves more memory/cpu) it's also faster
var wrapper = document.getElementById('files')
var URL = window.URL || window.webkitURL;
wrapper.addEventListener('change', function(evt){
var input = evt.target
if (input.matches('input[type="file"]') && (input.files || [])[0]) {
var img = new Image
img.width = 50
img.onload = function() {
var output = document.getElementById(input.dataset.for)
output.appendChild(this)
}
img.onerror = function(){
console.log("You uploaded something that is not an image")
}
img.src = URL.createObjectURL(input.files[0])
}
})
output {
display: block;
}
<div id="files">
<!-- Recomend adding accept attribute so you only get images -->
<!-- just made one example -->
<input type="file" data-for="list1" accept="image/*">
<output id="list1"></output>
<input type="file" data-for="list2">
<output id="list2"></output>
<input type="file" data-for="list3">
<output id="list3"></output>
<input type="file" data-for="list4">
<output id="list4"></output>
</div>
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
So I got this script that is supposed to output the file contents of an uploaded file in base64 encoding, the problem is that it also outputs something like data:image/jpeg;base64, at the beginning of the encoded output. What do I need to do so this script just outputs the encoded file contents of the uploaded file and not data:image/jpeg;base64, etc?
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
var sizef = document.getElementById('uploadImage').files[0].size;
document.getElementById("uploadPreview").src = oFREvent.target.result;
document.getElementById("uploadImageValue").value = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function ()
{
var imgUrl = $('#uploadImageValue').val();
document.write(imgUrl);
});
});
</script>
<div>
<input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" />
<img id="uploadPreview" style="width: 150px; height: 150px;" /><br />
<input id="uploadImage" style="width:120px" type="file" size="10" name="myPhoto" onchange="PreviewImage();" />
</div>
Source file
</body>
change code to
document.write(imgUrl.split(',').pop());
^^^^^^^^^^^^^^^^^
or
var imgUrl = $('#uploadImageValue').val().split(',').pop();
^^^^^^^^^^^^^^^^^