SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FileReader doesn't work on Safari

    Hi,

    I have a form with an image upload field. When the user selects an image from the desktop, the preview box displays the image (before uploading occurs). My script works on Firefox and Chrome but it doesn't work on Safari (Windows). Below is the code I have right now:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Preview</title>
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<script>
    	function readURL(input) {
    		if (input.files && input.files[0]) {
    			var reader = new FileReader();
    			reader.onload = function (e) {
    				$('#preview').attr('src', e.target.result);
    			};
    			reader.readAsDataURL(input.files[0]);
    		}
    	}
    	</script>
    </head>
    <body>
    	<input type='file' onchange="readURL(this);" />
    	<img id="preview" src="" />
    </body>
    </html>
    Is there a way to make it also work on Safari (Windows)?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi nayen,

    The FileReader API is only available as of Safari 6.0
    http://caniuse.com/filereader

    So, no, unfortunately I do't think there is a way to get it to work "as is".

    However, if it's important for you to have this functionality in all browsers, you could test for the availability of the FileReader API:

    Code JavaScript:
    if(window.FileReader) {   //do this
    } else {
       //the browser doesn't support the FileReader Object, so do this
    }

    Then, if it is not supported, you could POST the file via AJAX to a simple PHP script, which would then echo back the contents.

    HTH

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi nayen,

    The FileReader API is only available as of Safari 6.0
    http://caniuse.com/filereader

    So, no, unfortunately I do't think there is a way to get it to work "as is".

    However, if it's important for you to have this functionality in all browsers, you could test for the availability of the FileReader API:

    Code JavaScript:
    if(window.FileReader) {   //do this
    } else {
       //the browser doesn't support the FileReader Object, so do this
    }

    Then, if it is not supported, you could POST the file via AJAX to a simple PHP script, which would then echo back the contents.

    HTH
    Dave, thank you very much. I think I can use your suggestion. I have never worked with Ajax but since that you are saying it is possible, I will see what I can do.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •