Preview local image in javascript, ie compatible mode cannot display it in dl dt dd

Lionsure 2020-06-18 Original by the website

Uploading images on the website is an indispensable function. Each uploaded an image should be displayed to the uploading user on the client. Generally, the image is displayed directly through the path generated after uploading it; but in order to prevent individual users from uploading illegal images, they are usually displayed after review. Directly display the image with the path and tell the uploading user its URL. According to this URL, the image can be opened directly, regardless of whether it is reviewed, so there is a certain risk. Maybe you will say, upload the images to a temporary folder, and after the users uploads move them to another folder, so that they cannot be accessed before the review; of course, this is also a way to deal with too much trouble, and frequent operation of the hard disk is not good.

If you use javascript to preview the image and directly display the uploaded image selected in the client to the user, in other words, use javascript to preview the image locally. That is not to operate the server, which not only saves server resources and reduces the operation of hard disk, but also does not need to download the uploaded image to save server traffic, why not do it.

 

1. Preview local image in javascript, ie compatible mode cannot display it in dl dt dd

There is a strange phenomenon when using javascript to preview local images. Images cannot be displayed in the dl dt dd tag in the compatibility mode of Internet Explorer(IE11). The specific HTML code is as follows:

<dl><dt>Upload image: </dt><dd><ul><li><img src="Upload image local path" /></li></ul></dd></dl>

If the compatibility mode is cancelled, it can be displayed normally.

 

2. The solution

Just put the <ul><li><img src="local path for uploading image" /></li></ul>(only the image tag is also acceptable) outside the <dl></dl> tag, it can be displayed normally, that is:

<dl><dt></dt><dd></dd></dl>
       <div>Upload image: </div><ul><li><img src="Upload image local path" /></li></ul>