The example in this article describes the jQuery HTML5 implementation of image preview before uploading. Share it with everyone for your reference. The details are as follows:
Here we mainly use the File API of HTML5 to create a URL that can access the file, an empty img tag with the ID of img0, and display the selected file in the img tag to implement the image preview function. Please choose a browser that supports HTML API, such as Google Chrome and Firefox.
The operation effect is as shown below:
The online demo address is as follows:
http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
</body>
</html>I hope this article will be helpful to everyone’s jquery programming design.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
