javascript input image upload and preview, FileReader preview image
|
FileReader is an important API for front-end file processing, especially for image processing. If you want to know the principle of image processing, you will never be able to bypass it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //The input box is made transparent here, and then absolutely positioned on the button .btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}
</style>
</head>
<body>
<button class="btn">Picture</button>
<input type="file" id="file" accept="image/jpg,imgae/jpeg,image/png" class="file-ipt" onchange="insertimg(this);"><br>
<img src="" id="img1" alt="">
<script language="javascript">
function insertimg(img){
var rd=new FileReader();
files=img.files[0];
var filetype = files.type.slice(6,10);
if(filetype!='jpg'&&filetype!='jpeg'&&filetype!='png'){
alert('Only png, jpeg, jpg image formats are supported');
return;
}else{
rd.readAsDataURL(files);
rd.onloadend=function(e){
document.getElementById('img1').src=e.target.result;
document.getElementById('img1').style.width="300px";
document.getElementById('img1').style.height="auto";
};
}
}
</script>
</body>
</html>Knowledge point supplement: JS input file picture upload preview effect First, you can learn about the file and FileReader APIs. After selecting one or more files, you can access one or more File objects representing the selected files. These objects are contained in a FileList object. All <input> elements with a type attribute of file have a files attribute to store the files selected by the user. Files has a length property and an item method. We can get the file object of our choice through files[index] or files.item(index). You can use the change event to listen for the input file input completion event. HTML code:
<ul class="crgoods_uploadUl clearfix">
<li><img src="img/product1.jpg"></li>
<li><img src="img/product1.jpg"></li>
<li class="add"><i>+</i>Up to 20 pictures<input type="file" class="liAdd_flie" onchange="liUploadImg(this)"></li>
</ul>js code:
//Product album picture upload preview function liUploadImg(file){
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
// imgUpload.src = evt.target.result;
$('.crgoods_uploadUl li.add').before('<li><img src="'+evt.target.result+'"></li>');
}
reader.readAsDataURL(file.files[0]);
}else{
var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
}
}In addition, the detailed API can refer to https://segmentfault.com/a/1190000006600936 Here is an example:
This is the end of this article about javascript input image upload and preview, FileReader preview image. For more related javascript file upload and preview content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to reasonably use the redundant fields of the database
Recommend
Web standards learning to understand the separation of structure and presentation
When discussing Web standards, one thing that alwa...
JavaScript gets the scroll bar position and slides the page to the anchor point
Preface This article records a problem I encounte...
Let me teach you how to use font icons in CSS
First of all, what is a font icon? On the surface...
Web Design Tutorial (4): About Materials and Expressions
<br />Previous Web Design Tutorial: Web Desi...
MySQL 8.0.13 decompression version installation graphic tutorial under Windows
This article shares with you the MySQL 8.0.13 ins...
mysql-canal-rabbitmq installation and deployment super detailed tutorial
Table of contents 1.1. Enable MySQL binlog 1.2. C...
Simply understand the differences in the principles of common SQL delete statements
This article mainly introduces the differences be...
Example of how to generate random numbers and concatenate strings in MySQL
This article uses an example to describe how MySQ...
Vue conditional rendering v-if and v-show
Table of contents 1. v-if 2. Use v-if on <temp...
Analysis and application of irregular picture waterfall flow principle
The layout problem of irregular picture walls enc...
Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript
Table of contents 1. classList attribute 2. Pract...
25 CSS frameworks, tools, software and templates shared
Sprite Cow download CSS Lint download Prefixr dow...
How to prevent website content from being included in search engines
Usually the goal of building a website is to have...
Analysis of MySQL query sorting and query aggregation function usage
This article uses examples to illustrate the use ...
Solution to MySQL error code 1862 your password has expired
The blogger hasn't used MySQL for a month or ...