前端上传图片预览

——不控制高宽——

---

html

<input type="file"><br><img src="" height="200" alt="Image preview area..." title="preview-img">

js

var fileInput = document.querySelector('input[type=file]');var previewImg = document.querySelector('img');fileInput.addEventListener('change', function () {var file = this.files[0];var reader = new FileReader();reader.addEventListener('load', function () {    previewImg.src = reader.result;}, false);reader.readAsDataURL(file);}, false);

---

——控制高宽——

---

html

<div id="preview"></div><input type="file" onchange="preview(this)" />

css

 #preview, .img, img { width:200px; height:200px; } #preview {border:1px solid #000;}

js

 function preview(file){     var prevDiv = document.getElementById('preview');     if (file.files && file.files[0])     {     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>';     } }