JS原生实现本地图片上传预览

最新推荐文章于 2022-11-21 09:48:44 发布

大刘鸭

最新推荐文章于 2022-11-21 09:48:44 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： JS原生 FileReader 图片本地上传并预览

本文链接：https://blog.csdn.net/xiao_yu_liu/article/details/64905205

版权

JavaScript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

执行方式如下：
$("input").change(function() {
			var config = {
				imgWrapWidth: 300, //px
				imgWrapHeight: 200, //px
				imgMaxWidth: "100%",
				imgMaxHeight: "100%",
			};
			ImgShow(this, "result", config);
		});

函数：
function ImgShow(arg, showWrapId, config) {
			//input的状态change的时候,执行此函数,需要把input用this的方式传递进来，三个参数必须有
			//arg=this   showWrapId=图片显示框的ID     config=显示框的大小和图片显示的大小
			//图片在显示框中绝对居中
			//config = {
//				imgWrapWidth: 300, //px
//				imgWrapHeight: 200, //px
//				imgMaxWidth: "100%",
//				imgMaxHeight: "100%",
//			};
			var file = arg.files[0];
			if(!/image\/\w+/.test(file.type)) {
				alert("请上传图片！");
			} else {
				var reader = new FileReader();
				//将文件以Data URL形式读入页面  
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					var showWrap = document.getElementById(showWrapId);
					showWrap.style.width = config.imgWrapWidth + "px";
					showWrap.style.height = config.imgWrapHeight + "px";
					showWrap.style.textAlign = "center";
					//显示文件  
					showWrap.innerHTML = "<span style='vertical-align: middle;display: inline-block;height: 100%;'></span>" +
						"<img style='vertical-align: middle;display: inline-block;max-width:" + config.imgMaxWidth + ";max-height:" + config.imgMaxHeight + ";'" +
						" src='" + this.result + "' alt='' />";
				}
			}