How to implement JavaScript image local preview function

This article mainly introduces JavaScript to implement the local image preview function. It is aimed at the HTML5 filter function of non-IE browsers and the related component functions of IE browsers to achieve the effect of previewing local images without uploading to the server. Friends in need can refer to Next

The example in this article describes how to implement the image local preview function using JavaScript. Share it with everyone for your reference, the details are as follows:

Implement a preview immediately after selecting the image file in the file file field. There is no need to upload it to the server in advance. The whole thumbnail is then sent back to the front end for preview using Ajax. It can be done directly using JavaScript, and it is also compatible with IE6. The specific effect is as shown in the figure below:

The specific implementation is to use HTML5 to display in non-IE browsers, and directly call the filter function of IE to achieve it in IE browsers . The specific code is as follows:

First, generate a p with id=imghead in preview, the p where the image preview is placed.

For the non-IE part, HTML5 can be used to directly read the file selected by the user. Through function clacImgZoomParam(maxWidth, maxHeight, width, height), the size of the preview image can be calculated, and then the size of the preview image can be directly This picture is placed in the p with id=imghead. If it is IE, the generated p with id=imghead will be given the filter set in the style tag, load the image file selected by the user through the filter, and then use the clacImgZoomParam function to find its size, and get After resizing, clear all the content in the preview, officially generate the image filter assigned to it, and add the p with a determined size.

In the file field is also usedaccept="image/*"This HTML5 function is used to limit users to Select the image file, but when submitting the form, you should also judge it through onSubmit. At the same time, it should be judged in the server background to prevent users from sending some weird things to the server.

The above is the detailed content of How to implement JavaScript image local preview function. For more information, please follow other related articles on the PHP Chinese website!