js upload image preview problem_image special effects-JS Tutorial-php.cn

js upload image preview problem_image special effects

WBOY

Release： 2016-05-16 18:14:33

Original

874 people have browsed it

Recently, I often encounter browser compatibility issues. Yesterday, I encountered a problem with uploading image previews. I found that IE8 and Firefox could not display them. I struggled for a long time and was finally solved this morning. I am very happy. So I want to share it with you. I mostly found it online and summarized it myself. I hope it will be helpful to everyone.
When we develop according to IE6 and IE7, we usually write the code for image preview:

Copy the code The code is as follows:

document.getElementById("img").src = document.getElementById("file").value;

　There is another way

Copy code The code is as follows:

IE8
On IE8 and Firefox Direct user control.value gets only the file name instead of the full path

Copy code The code is as follows:

 
var isIE = (document.all) ? true : false; 
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1); 
var isIE8 = isIE && ( navigator.userAgent.indexOf('MSIE 8.0') != -1); 
var file = document.getElementById("file"); 
if (isIE7 || isIE8) { 
file.select( ); 
img = document.selection.createRange().text; 
document.selection.empty(); 
document.getElementById("img").src = img; 
} 

Firefox
There are many problems on Firefox, and I have searched for many things on the Internet, but cannot achieve it. First, I need to obtain
. There are many problems on Firefox, and I have searched for many things on the Internet, but cannot achieve it.
1. First, you need to get the full path of the uploaded question. You can use the following method to get the full path

Copy the code The code is as follows:

 
　if (navigator.userAgent.indexOf("Firefox") != -1) { 
　try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
} catch (e) { 
} 
img = document.getElementById("file").value; 
　} 

　2. But there was no response when directly modifying the path (src) of the image like this. Later I found out that someone said that to display local images in Firefox, you need to add "file:///" in front

Copy Code The code is as follows:

 
　if (!document.all) { 
img = img.replace(/\/g, "/"); 
img = "file:///" img 
} 

In this way, if you put an image on the page, it can be displayed, but the prerequisite is that it cannot be placed on IIS. My website It is deployed on IIS, so even if I directly put the image address and it is a local image, it will not be displayed. So I am very depressed. Moreover, many people said that Firefox has security settings and cannot preview local images, so I almost gave up.
Finally, I found an example on the Internet that can be previewed. After careful analysis, I found that the original code for previewing images on Firefox is actually very simple:

Copy code The code is as follows:

 
　document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL(); 

I popped up its path and found that it was a long string of things, which seemed to be specified image types, etc., but I finally solved it.