HTML5 and jQuery to implement preview code examples before uploading local pictures

HTML5 and jQuery implement the preview of local images before uploading, the effect is similar to the following:
Select the page before the picture:

這里寫圖片描述

Preview effect after selecting the picture:

這里寫圖片描述

Below is the code (just the simplest implementation code, the CSS style is not copied, you can play it as you like)

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5 uploaded image preview</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> 
</head> 
<body> 

 ...

 <form name="form0" id="form0" > 
 <!-- Here is a special mention of multiple="multiple". After adding this, you can select multiple files to upload at once. This is a new attribute of HTML5--> 
 <input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" > 
 </form> 

 ...

<script> 
 $("#file0").change(function(){ 
  // getObjectURL is a custom function, see below // this.files[0] represents the first selected file resource, because multiple="multiple" is written above, which means that there may be more than one uploaded file //, but only the first one is read here var objUrl = getObjectURL(this.files[0]); 
  // This code has no effect, you can delete it // console.log("objUrl = "+objUrl); 
  if (objUrl) { 
  // Modify the image's address attribute here $("#img0").attr("src", objUrl); 
  } 
 }) ; 
 //Create a URL that can access the file 
 function getObjectURL(file) { 
  var url = null ; 
  // The following functions have the same effect, except that different js functions need to be executed for different browsers 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>

This is the end of this article about the example code of how to use html5 and jQuery to preview local images before uploading. For more information about how to use html5 and jQuery to preview local images before uploading, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Remove HTML tags and delete HTML sample code
Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)
HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code
js+html+css to achieve manual and automatic carousel
Two ways to use JavaScript in HTML
How to learn various tags of html

<<: MYSQL unlock and lock table introduction

>>: Optimization of MySQL thread_stack connection thread