FileReader 实现预览图片

<script type="text/javascript">
var result = document.getElementById("result");
var input = document.getElementById("file_input");
if(typeof FileReader === 'undefined'){
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');

}else{

input.addEventListener('change',readFile,false);//事件监听

}

function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){
  result.innerHTML = '<img src="'+this.result+'" alt=""/>'

}

}

</script>

<label>请选择一个图像文件：</label>
        <input type="file" id="file_input" />
    </p> 
    <div id="result">
          <!-- 这里用来显示读取结果 -->
    </div> 

如果需要上传到服务器 就用<form></form>嵌套起来跟平时上传一样