Alert not come when onchange event in internet explore ?
i am use below code:
<input type="file" onChange="readURL(this)" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js " > </script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
alert('asf');
reader.onload = function(e) {
//alert(e.target.result);
$('#photoview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
IE9 doesn't have the FileReader.
See compatibility table at end of this MDN documentation. Note that this document also proposes a solution for compatibility with IE.
for IE you have to use FileSystemObject activex component
for more details check this link :
http://www.java2s.com/Tutorial/JavaScript/0600__MS-JScript/FileSystemObjectGetFile.htm
Related
I tried to create image preview function with JQuery. It's work with IE,Chrome,Firefox and Edge. but din't work with Safari.
This is my code:
<!-- JQuery -->
<script>
function bacaGambar(input) {
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#preview").change(function(){
bacaGambar(this);
});
</script>
Thank's.
Try to replace ids with classes in your html for Safari to work properly.
Modify $("#img_prev") to $(".img_prev") and $("#preview") to $(".preview").
This advice is taken from the related question: Jquery condition works in all browsers except safari.
I have modified the function
<script>
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]);
}
}
$("#upload").change(function() {
readURL(this);
});
</script>
and included this input in my form in the body element:
<input type="file" name="uploaded_files" id="upload"/>
<img id="blah" src="#" alt="your image" />
I have also included jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
It’s working in JsFiddle, but it’s not working on my localhost.
There is absolutely nothing wrong with what you have done, neither with your script JS block. You can go and check on this JSFiddle.
Just make sure you are loading the jQuery library correctly since your script depends on.
Try Like
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);
});
Demo
I want to do is if the user click to browse for files he should see images only no other files. How to do that using jquery?
My problem is I can see and choose other files besides images when i browse.
current output: http://jsfiddle.net/LvsYc/3123/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#Picture').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
Change your input to:
<input type='file' id="imgInp" accept="image/*" />
http://jsfiddle.net/LvsYc/3124/
I have an input that looks like this
<input type="file" onchange="readURL(this);" value="" class="my_files" name="my_files[0]"></input>
and when the value changes it calls this function
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
alert(e.type)
$('.my_preview').attr('src', e.target.result);
$('.vehicle_preview').delay(700).slideDown('slow');
};
reader.readAsDataURL(input.files[0]);
}
}
The purpose of all this is to generate a preview image when one is uploaded. The problem is that I can't target the my_preview I want because I am not passing anything I can use in to find the closest one .... any suggestions? I should add that the complication comes from the fact that there are multiple uploads possible.
I'm currently trying to make an image preview on the client side of selected image, before the user clicks on a submit button.
I've found this approach here in the forum:
function selectedPhotoText(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview')
.attr('src', e.target.result)
.width(240)
.height(149);
};
reader.readAsDataURL(input.files[0]);
}
else {
$('#imagePreview').attr('src', "../../Images/blqblq.jpg");
}
}
<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>
and the file upload control:
<asp:FileUpload ID="uploadPhotoDialog" onchange="selectedPhotoText(this)" runat="server"/>
This approach works fine in Chrome, Firefox and Opera. Is there any workarounds for IE and Safari?
Thanks in advance!
Safari to 5.X.X and IE to 9.x.x doesnt support FileReader.
Look this.
http://caniuse.com/filereader