display image selected for uploading in Chrome and mozilla


In one of my web application I have to show the image which selected for uploading before it uploaded to the server , using javascript .

I had this code ... It is working pretty well and fine in Mozilla . But not in Safari or Chrome .. Please help

// Handle file while select a new file $('#file').change(function(){ $('#img_size').val((this.files[0].size)/1000000); handleFiles(this.files); }); // handle files function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } var img=document.getElementById('fake_img'); img.src = file; img.onload = function() { }; var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } }


This code is working fine in chrome

<a href="http://jsfiddle.net/PrNWY/13/" rel="nofollow">http://jsfiddle.net/PrNWY/13/</a>

Its shows the selected image in chrome & FF.


you can check file reader capability with following code

// Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { // Great success! All the File APIs are supported. alert('The File APIs are fully supported in this browser.'); } else { alert('The File APIs are not fully supported in this browser.'); }

In my safari it failed because of it is not supporting file API fully.


  • How to Specify a diagonal matrix using tf.get_variable
  • Group list of tuples by item
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Allowing both email and username for authentication
  • Django rest serializer Breaks when data exists
  • jQuery .attr() and value
  • Change multiple background-images with jQuery
  • How to rebase a series of branches?
  • Email format validation in mvc3 view
  • Android screen density dpi vs ppi
  • Regex thinks I'm nesting, but I'm not
  • req.body is undefined - nodejs
  • Azure Cloud Service Web Role web pages do not load
  • How to get a value (ex: baseURL) in every Karate feature?
  • angularjs unit test when to use $rootScope.$new()
  • How to set/get protobuf's extension field in Go?
  • Submit form in a displaytag pagination
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Change an a tag attribute in JavaScript based on screen width
  • what is the difference between the asp.net mvc application and asp.net web application
  • Calling of Constructors in a Java
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How do I rollback to a specific git commit
  • Is there a mandatory requirement to switch app.yaml?
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to delete a row from a dynamic generate table using jquery?
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • using HTMLImports.whenReady not working in chrome
  • Authorize attributes not working in MVC 4
  • apache spark aggregate function using min value
  • EntityFramework adding new object to nested object collection
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?