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: