Code _ javascript skills

This article mainly introduced compatible with the latest firefox, chrome and IE javascript Picture preview implementation code, test the browser firefox6, firefox12, chrome25.0.1364.172m, IE6-IE10 are compatible, if you need it, you can refer to the javascript below to implement client file selection and then load the client image with the img tag to implement image preview.

Test Browser: firefox6, firefox12, chrome 25.0.1364.172 m, IE6-IE10 are compatible

Safari5.0.4 does not support FileReader and file. files. item (0 ). the getAsDataURL method has no solution for the moment. You need to upload it to the server and return the temporary file name to be loaded using the img tag. I wonder if the safari version will support the FileReader object.

IE10 results:

Results In IE9:

Source code:

 Javascript to Implement IE and firefox client image PreviewScript // use the IE condition annotation to determine whether IE6 is used, and determine whether userAgent is not necessarily accurate if (document. all) document. write ('
 '); // Var ie6 =/msie 6/I. test (navigator. userAgent); // not recommended. ie6 userAgent in some systems may be IE7 or IE8 function change (picId, fileId) {var pic = document. getElementById (picId); var file = document. getElementById (fileId); if (window. fileReader) {// chrome, firefox7 +, opera, IE10, IE9, and IE9 can also use filters to implement oFReader = new FileReader (); oFReader. readAsDataURL (file. files [0]); oFReader. onload = function (oFREvent) {pic. src = oFREvent.tar get. result ;};} else if (document. all) {// IE8-file. select (); var reallocalpath = document. selection. createRange (). text // obtain the actual local file path in IE if (window. ie6) pic. src = reallocalpath; // The img src set in IE6 can be directly displayed as the local path. for IE of non-IE6 version, the img src cannot be directly set to display the local image due to security issues, however, filters can be implemented. IE10 does not support filters and must be implemented using FileReader. Therefore, determine whether FileReader first pic. style. filter = "progid: DXImageTransform. microsoft. alphaImageLoader (sizingMethod = 'image', src = \ "" + reallocalpath + "\") "; pic. src = 'data: image/gif; base64, R0lGODlhAQABAIAAAP // wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw = '; // set the src of img to a base64 encoded transparent image, do you want to display the red xx} else if (file. files) {// firefox6-if (file. files. item (0) {url = file. files. item (0 ). getAsDataURL (); pic. src = url ;}} script