您的位置：首页 > 编程学习 > > 正文

js 图片编辑处理库（javascript input图片上传及预览,FileReader预览图片）

更多时间：2022-01-16 00:33:02 类别：编程学习浏览量：2777

js 图片编辑处理库

javascript input图片上传及预览,FileReader预览图片

FileReader是前端进行文件处理的一个重要的Api，特别是在对图片的处理上，如果你想知道图片的处理原理，你就永远不可能绕过它。

<!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;}  //这里透明化了input框，然后绝对定位在按钮上了
		.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">图片</button>
		<input type="file" id="file" accept="image.jpg" alt="js 图片编辑处理库（javascript input图片上传及预览,FileReader预览图片）" border="0" />

知识点补充:JS input file图片上传预览效果

首先，可以先了解file 和FileReader 的API，在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。所有type属性(attribute)为file的<input>元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(index)获取我们选择的file对象。可以通过change事件监听input file输入完成事件。

html代码：

 <ul class="crgoods_uploadUl clearfix">
     <li><img src="img/product1.jpg" alt="js 图片编辑处理库（javascript input图片上传及预览,FileReader预览图片）" border="0" />

js代码：

//商品相册图片上传预览
    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;
        }
    }

另外，详细API可以参考https://segmentfault.com/a/1190000006600936

示例如下：

js 图片编辑处理库（javascript input图片上传及预览,FileReader预览图片）

到此这篇关于javascript input图片上传及预览,FileReader预览图片的文章就介绍到这了,更多相关javascript文件上传及预览内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！

标签：js 图片上传图片上传预览

上一篇：python3编程过程（Python3模拟登录操作实例分析）

下一篇：在css中用属性来实现文字环绕图片（css文字环绕图片—遇到的问题及快速解决方法）

您可能感兴趣

js 图片编辑处理库（javascript input图片上传及预览,FileReader预览图片）

js 图片编辑处理库

热门推荐

排行榜