上传图片预览

原生的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