原生的input type="flie"很不美观的,一般将其设置成透明度为0,绝对定位在美化后的元素之上。但是在选择图像后,没有任何操作显示我的图片已经传了,所有在这里要实现一个功能:
在上传按钮的下边添加一个占位标签img,在input onchange的时候,将图片显示在img位置。
html:
<div class="uploadImg clearfix"> <input type="button" value="上传户型图"> <input id="file" type="file" accept="image/*;capture=camera" onchange="showPreview(this);"> </div>
javascript:
<script type="text/javascript"> function showPreview(source){ var file=source.files[0]; if(window.FileReader){ var fr = new FileReader(); fr.onloadend = function(e){ document.getElementById("imgbox").src=e.target.result; }; fr.readAsDataURL(file); } } </script>
id="imgbox"为图片容器。
onchange="showPreview(this.value);传递的参数是图片的名称。
参考地址:
http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml