JS图片的上传预览和表单提交（FileReader()方法）

一开始没有搞明白下面这块代码的，今天有时间简单整理下

核心点：FileReader()方法

以下是代码（以JSP文件为例）

<!DOCTYPE html>
<html lang="en">
<head>    
<script type="text/javascript">
//上传-预览逻辑
    $(".newspic").click(function() {    //1.点击默认图片，出发标签<a>的click事件
        $(this).next('input').click();//2.触发input的点击事件，用户选择图片进行上传
    });    
    function showPic(data) {//3.当用户上传图片后，触发input标签的onchange事件，执行showPic()方法
        if (data.files && data.files[0]) {//4.判断input标签的file是否存在
            var reader = new FileReader();//5.实例化一个FileReader()接口
            reader.readAsDataURL(data.files[0]);//6.通过readAsDataURL()方法读取文件，将图片内嵌在网页之中
             reader.onload = function(evt) {//7.调用FileReader()的onload事件，当文件读取成功时，执行8
                 //8.将reader的result属性值赋值给data.parentNode.childNodes[1].childNodes[1].src，实现图片预览
                data.parentNode.childNodes[1].childNodes[1].src = evt.target.result; 
            }
        }
    }
    
//上传-提交保存逻辑
//用户选择图片,点击提交；将数据通过表单(name-value)提交给后台；注意：需要表单enctype="multipart/form-data"；否则后台无法接受
</script>
</head>
<body>
        <form action="hospital/saveHospital.do" name="editForm"  method="post" enctype="multipart/form-data">
            <a href="javascript:void(0)" class="newspic">
            <!-- static/img/selectimg.png是默认图片，当reader读取完毕后，执行步骤8，即展示上传图片 -->
                <img style="width:200px;height:100px;"  src="static/img/selectimg.png"/>/
            </a>
            <input type="file" id="logoUrl" name="logoUrl" onchange="showPic(this)"  style="display: none"/>    
            <button   type="submit" >提交</button>        
    </form>
</body>
</html>

示例效果

posted on 2017-10-20 09:18 我不吃番茄阅读(8619) 评论(1) 编辑收藏举报