input[type="file"]的图片预览

在项目中遇到用input标签file类型的文件上传，想实在上传之前进行图片的预览功能；之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上，这样就不太好，因为用户基本信息可能并没有保存，但是图片却已经改变，如果在需要改变就导致了多余图片的保存服务器。

如下可实现代码预览：

1、直接添加图片预览

<input type='file' id='file' />

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script>
$(function() {
　　$("#file").change(function(e) {
　　　　var file = e.target.files[0] || e.dataTransfer.files[0](weizhi);
　　　　if(file) {
　　　　　　var reader = new FileReader();
　　　　　　reader.onload = function() {
　　　　　　　　$("body").append("<img src='" + this.result + "'/>"); 

　　　　　　} 
　　　　　　reader.readAsDataURL(file); 
　　　　} 
　　}); 
}) 
</script>

2、点击预览

<input type="file" id="file" multiple />
<input type="button" value="读取图像" onclick="readAsDataURL()" />

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
　　　　function readAsDataURL() {
　　　　　　var file = $("#file").get(0).files;
　　　　　　// var file = document.getElementById("file").files;
　　　　　　for(i = 0; i < file.length; i++) {
　　　　　　　　reader.readAsDataURL(file[i]);
　　　　　　　　reader.onload = function(e) {
　　　　　　　　//多图预览
　　　　　　　　$("body").append('<img src="' + this.result + '" alt="" />');
　　　　　　　　}
　　　　　　}
　　　　}
</script>