FileReader doesn't work on Safari

JavaScript
1

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:

<!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

Hi nayen,

The FileReader API is only available as of Safari 6.0

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:

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

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.