<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><style type="text/css">#preview, .img, img { ???width: 200px; ???height: 200px;}#preview { ???border: 1px solid #000; ???margin-left: 88px; ???margin-top: -15px;}</style></head><body><div style="margin-bottom: 15px; clear: both"> ?<label style="padding: 9px 15px;"> ??????<span style="color: red;">*</span>轮播图 ????</label> ?<input type="file" onchange="preview(this)" /></div><div style="margin-bottom: 15px; position: relative;"> ?????<label style="padding: 9px 15px;"> ????缩略图 ????</label> ?<div id="preview"></div></div><div style="margin-bottom: 15px; clear: both"> ?????<label style="padding: 9px 15px;"> ??????<span style="color: red;">*</span>链接 ????</label> ?<input type="text" /></div><div style="margin-bottom: 15px; clear: both"> ?????<label style="padding: 9px 15px;"> ??????<span style="color: red;">*</span>描述 ????</label> ?<input type="text" /></div><div> ???<input type="button" value="增加" id="tj"></div> ???<script type="text/javascript"> ???document.getElementById("tj").onclick = function(){ ???????????????alert("添加按钮事件!"); ???????????}; ?function preview(file) { ?????//输出数据 ?????//console.log("12312000111222"); ?????//console.log(file); //<input type="file" onchange="preview(this)"> ?????//console.log(file.files);//FileList {0: File(88977), length: 1} ???????????//console.log(file.files[0]);//File(88977) {name: "QQ截图20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 88977, …} ?????//-- ?????????var prevDiv = document.getElementById(‘preview‘);//获取这个div对象 ???????????console.log(file.files && file.files[0]); //File(88977) {name: "QQ截图20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 88977, …} ?????????if (file.files && file.files[0]) { ????????????????//--检测浏览器是否支持Filereader ???????if(window.FileReader) { ????????var fr = new FileReader(); ?????// add your code here ???????} ???????else { ???????alert("Not supported by your browser!"); ???????} ???????//-- ?????var reader = new FileReader(); ?????reader.onload = function(evt) { ???????prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘; ?????} ?????reader.readAsDataURL(file.files[0]); ???} else { ?????prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘; ???} ?} ?</script></body></html>js预览上传图片
原文地址：https://www.cnblogs.com/enych/p/8631135.html