Home  >  Article  >  Web Front-end  >  jQuery implements preview function of image files before uploading

jQuery implements preview function of image files before uploading

小云云
小云云Original
2017-12-22 10:17:462411browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn