前端上传图片预览

——不控制高宽——

---

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>';
     }
 }