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:
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:
|
<<: MYSQL unlock and lock table introduction
>>: Optimization of MySQL thread_stack connection thread
Recommend
In-depth analysis of the reason why the error "The server quit without updating PID file" is reported when MySQL is started
Many people have encountered this error when star...
An elegant way to handle WeChat applet authorization login
Preface When the WeChat mini program project invo...
Installation, configuration and use of process daemon supervisor in Linux
Supervisor is a very good daemon management tool....
Detailed explanation of the use of filter properties in CSS
The filter attribute defines the visual effect of...
A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files
The relationship between Tomcat logs A picture is...
10 key differences between HTML5 and HTML4
HTML5 is the next version of the HTML standard. M...
A brief analysis of the usage of USING and HAVING in MySQL
This article uses examples to illustrate the usag...
How to install Odoo12 development environment on Windows 10
Preface Since many friends say they don’t have Ma...
How to configure Linux to use LDAP user authentication
I am using LDAP user management implemented in Ce...
User needs lead to marketing-oriented design
<br />For each of our topics, the team will ...
Node.js returns different data according to different request paths.
Table of contents 1. Learn to return different da...
Detailed explanation of the use principle and calculation method of the umask command under Linux
Table of contents umask Umask usage principle 1. ...
Sample code for implementing follow ads with JavaScript
Floating ads are a very common form of advertisin...
Nginx uses ctx to realize data sharing and context modification functions
Environment: init_worker_by_lua, set_by_lua, rewr...
In-depth explanation of the maximum value of int in MySQL
Introduction I will write about the problem I saw...