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
Summary of MySQL Undo Log and Redo Log
Table of contents Undo Log Undo Log Generation an...
Two-hour introductory Docker tutorial
Table of contents 1.0 Introduction 2.0 Docker Ins...
Detailed explanation of Kubernetes pod orchestration and lifecycle
Table of contents K8S Master Basic Architecture P...
Pitfalls encountered when installing MySQL 8.0.18 compressed package and resetting forgotten passwords
http://www.cppcns.com/shujuku/mysql/283231.html Y...
Detailed steps for installing and debugging MySQL database on CentOS7 [Example]
This example requires downloading and installing ...
Summary of commonly used multi-table modification statements in Mysql and Oracle
I saw this question in the SQL training question ...
Drop-down menu and sliding menu design examples
I found a lot of websites that use drop-down or sl...
Front-end JavaScript Promise
Table of contents 1. What is Promise 2. Basic usa...
A brief discussion of 12 classic problems in Angular
Table of contents 1. Please explain what are the ...
Three ways to implement text color gradient in CSS
In the process of web front-end development, UI d...
Realization of real-time file synchronization between Linux servers
Usage scenarios For existing servers A and B, if ...
Detailed explanation of docker version es, milvus, minio startup commands
1. es startup command: docker run -itd -e TAKE_FI...
Implementation of CSS3 button border animation
First look at the effect: html <a href="#...
Vue project @change multiple parameters to pass multiple events
First, there is only one change event. changeleve...
xtrabackup backup and restore MySQL database
Due to some of its own characteristics (locking t...