jQuery implements preview function of image files before uploading

If you want to complete a good work, you must make it perfect. For example, using jQuery to implement the image upload function, can we preview it before uploading? This article mainly shares with you a simple example of the jQuery image file preview function before uploading. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. I hope you can use jQuery to preview image files before uploading them.

1. First prepare a p

onchange trigger event

<input type="file" onchange="preview(this)" ></span>
<p id="preview"></p>

2. Write JS code

//上传图片之前预览图片
function preview(file){
if (file.files && file.files[0]){ 
var reader = new FileReader(); 
reader.onload = function(evt){ 
$("#preview").html('<img src="&#39; + evt.target.result + &#39;" width="95px" height="50px" />'); 
} 
reader.readAsDataURL(file.files[0]); 
}else{
$("#preview").html('<p style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\&#39;&#39; + file.value + &#39;\&#39;"></p>'); 
} 
}

Have you mastered it? This is a good jQuery technique, everyone should try it quickly.

Related recommendations:

PHP Image file upload implementation code

php+ajax implementation of image file upload function example_PHP

javascript implementation of asynchronous image upload method example

The above is the detailed content of jQuery implements preview function of image files before uploading. For more information, please follow other related articles on the PHP Chinese website!