I want to create a preview for image before upload it on the server, using JQuery.
My code, js code:
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
My html:
<input type='file' name='browse' onchange='Test.UpdatePreview(this)' />
<br/><br/>
<img src="#" alt="test" width="128" height="128" />
See jsfiddle: http://jsfiddle.net/aAuMU/
After onload, I see the src of image (using Google console application) and it looks like:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...
It is a way to get in javascript the base of image and assign to image in case I'm using IE as browser ?
FileReader doesn't work in IE < 10.
If you need it as getting nice effect then you could use flash like they do in
https://github.com/mailru/FileAPI
But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.
LIVE PREVIEW CAN BE DONE IN JQUERY
We need an onchange event to load the image. img tag is given an id = frame, the function UpdatePreview() loads the image immediately after the image or file is selected.
function UpdatePreview(){
$('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type='file' name='browse' oninput='UpdatePreview()'/>
<img src="#" id ="frame" alt="test" width="128" height="128" />
Instead of
$("img").prop("src", target.result);
write
$("#ImageId").attr("src", target.result);
Where ImageId is the ID of your img tag.
Related
I used upload tool for ASP.NET Core to upload person image, I put an HTML Image element beside the Upload image tool to display the image after upload it.
I invoke .Success event for upload tool and used a javascript function to set the src attribute for the image element with the uploaded image path. But unfortunately it does not work :(
This is the Image element
<img id="imgPerons" src="" width="200" height="250">
This is the javascript function:
function onSuccess(e) {
var files = e.files[0];
if (e.operation == "upload") {
document.getElementById("imgPerson").src = "~/images/person_photos/image.jpeg";
}
}
I think I have a problem with the path of the image, because I used online images like the following, and It works fine
function onSuccess(e) {
var files = e.files[0];
if (e.operation == "upload") {
document.getElementById("imgPerson").src = "https://www.example.com/image.jpeg";
}
}
What's the wrong with the path of the image?
I saved uploaded image in wwwroot/images/person_photos
The Image element and the javascript function in the path Views/Home/Index.cshtml
Removing ~ sign in javascript code should fix the problem because it's only processed on ASP.NET Core side
document.getElementById("imgPerson").src = "/images/person_photos/image.jpeg";
I'm dynamically adding content to HTML where there are images. By design I don't know the actual image data on the time of adding the content, but I'm retrieving this data using JS. I need an event that triggers the function that retrieves this content. So far I've implemented this using a hack:
<img src="_" onerror="loadImage(this)" data-id="1"/>
<img src="_" onerror="loadImage(this)" data-id="2"/>
<img src="_" onerror="loadImage(this)" data-id="3"/>
Each image fails to load src="_" attribute and triggers the onerror handle.
My question is how to avoid triggering the onerror event and call the loadImage by a more appropriate event. I'm looking for an event of each individual img.
Update: don't consider that as an easy question. The images are added dynamically from C++ code into QWebView. There are no actual images that I can access using any URL, but I'm retrieving them as byte arrays from the database (from C++ code as well). I'm accessing the C++ code from the JS function loadImage. I cannot use the window.onload cause the image is added at random moments of time when the main page is already loaded.
You can store your image files into an array (list). This code is just an example, this will change the image.src each two seconds, you can handle this with a function as you want.
var list = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
];
var i = 0;
function changeImgs() {
i++;
i == list.length ? i = 0 : 0;
var image = document.getElementById('image');
image.src = list[i];
document.getElementById('imgLink').href = list[i];
}
setInterval(function() {
changeImgs()
}, 2000);
window.onload = changeImgs;
<a id="imgLink" href=""><img id="image"></a>
Load a placeholder image and then hook into the onload event.
<img src="placeholder.jpg" onload="loadImage(this)" data-id="1"/>
<img src="placeholder.jpg" onload="loadImage(this)" data-id="2"/>
<img src="placeholder.jpg" onload="loadImage(this)" data-id="3"/>
You mentioned that the image src is a byte array that the c++ code has access to, you can use a byte array directly in the img src as follows:
<img src="data:image/jpg;base64, [byte array]">
The following image: http://www.oscn.net/dockets/GetDocument.aspx?ct=tulsa&cn=SC-2011-361&bc=1014242988&fmt=tif
How would I go about downloading this image and displaying it in html using javascript?
Here you go..
If you need to modify any properties of the image (size/color enhancement/etc.) use new_elem.setAttribute('attribute', 'value'); Just like in HTML <img attribute="value" />
var element = document.getElementById('mytargetlocation');
var new_elem = document.createElement('img');
var locationtoimage = 'https://www.sourcecertain.com/img/Example.png';
/*
Note: if your site uses HTTPS, this file will need to be loaded
over HTTPS, if it doesn't, you could just use the original
URL without downloading the image at all
*/
new_elem.setAttribute('src', locationtoimage);
new_elem.setAttribute('alt', 'image not found at specified URL');
element.append(new_elem);
<div id="mytargetlocation"></div>
I've made slideshow with thumbnails at it's side.
Here, basically a div which displays the image and after clickimg on a particular thumbnail, it's related picture will be dynamically displayed in the main div (#display #slideshowpic). Here is the code example,
<div id="container">
<div id="display">
<img id="slideshowpic" src="initial.jpg">
</div>
<div id="thumbs">
<img class="thumb" id="image1">
<img class="thumb" id="image2">
<img class="thumb" id="image3">
<img class="thumb" id="image4">
<img class="thumb" id="image5">
</div>
</div>
And here is the javascript,
$('.thumb').click( function() {
$('#slideshowpic').attr('src',""); /// clears or removes current image
$('#slideshowpic').attr('src',"/uploads/" + $(this).attr('id') + ".jpg");
});
Here, the image which is to be loaded in the main div after clicking thumbnail, is progressive image which is interlanced with php gd.
This is working perfectly in firefox. After clicking thumbnail, the image instantly displays in the main div with progressive fasion. But it doen't seems to be working in chrome.
The Problem is (chrome) : After clicking the thumbnail; first the image is cleared as per the code, then the previous image displays instead of new image (clicked image) and then new image displays after taking some time delay (i think the delay is the time which new image is taking to load).
google chrome doesn't show image till it loads image fully
I just can't figure out where is the problem is. Should i use another technique to load that dynamic image.. ? please help. I stucked in it from many days.
EDIT : you can check it in below links,
http://bit.ly/ZxVCM3
http://bit.ly/1oeutK5
http://bit.ly/1rIxvAV
Click the thumbnails to load the slideshow.
Seems like firefox uses the image cache and chrome doesn't.
I have used magnific popup,
http://dimsemenov.com/plugins/magnific-popup/
It has a built-in prefetch for galleries.
<img> without src has no reason...
$('.thumb').click( function() {
var img = $('#slideshowpic');
var src = $(this).attr('id');
img.css('opacity','0').on('load', function() {
$(this).fadeIn();
}).attr('src',"/uploads/" + src + ".jpg");
});
from Detect image load
Try this method:
img = new Image(); // this is important
img.src = src; // new src for the image.
img.onload = function () {
//Your logic. Replace the original image with the new one.
};
Instead of modifying the src of the image, try replacing the img tag with the new one when the new image is loaded. This should work for you. The issue is mainly because of the caching in chrome.
When Uploading a image through Redactor
Redactor will generate <img src="blablabla.png"/> tag
What if I want the tag is like:
<img class="myClass" src="blablabla.png"/>
How to do this?
I have viewed all the API and Callback but I didn't find any method to implement this.
It looks like you can use the imageUploadCallback.
This callback is triggered on successful image upload and the image DOM element is there for you to manipulate.
$('#redactor').redactor({
imageUploadCallback: function(image, json)
{
// image = this is DOM element of image
// json = for example: { "filelink": "/images/img.jpg" }
}
});