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>

示例效果

项目总结07：JS图片的上传预览和表单提交（FileReader()方法）的更多相关文章

  1. js实现本地的图片压缩上传预览

    js在设计时考虑到安全的原因是不允许读写本地文件的,随着html5的出现提供了fileReader AP从而可以I实现本地图片的读取预览功能, 另外在移动端有的限制图片大小的需求,主要是考虑图片过大会 ...

  2. 八 SpringMVC文件上传，必须设置表单提交为post

    1 修改Tomcat配置,本地目录映射 那么在server.xml中体现为: 测试一下是否设置成功: 2 引入jia包   3 配置多媒体解析器 3 jsp开启图片上传 4 Controller层设置 ...

  3. 图片上传预览转压缩并转base64详解（dShowImg64.js）

    hello,大家好,游戏开始了,欢迎大家收看这一期的讲解.本次的内容是图片的上传预览.最后发源码链接.废话不多说,先上图. 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传 ...

  4. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  5. HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...

  6. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  7. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  8. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  9. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

随机推荐

  1. JVM jstack 详解

    https://blog.csdn.net/zxp_cpinfo/article/details/54971115 输出到文件 >jstack -l PID >> /root/123 ...

  2. springboot 停止

    因springboot内嵌tomcat或jetty使得我们没法去操作服务: 因此,常常是服务起来后,要重启时会端口占用,我们只能无情的kill掉端口. 不过spring也设置有配置停止的请求: App ...

  3. opencv给图片添加文字水印<转>

    其中有一些改动为了文字大小等还有一些图片的尺寸,真正使用的时候可以把尺寸的屏蔽掉 头文件: //==================================================== ...

  4. iOS 坐标转换

    例:把A view上的某个点的坐标(a)转换到B view上,两种方法 CGPoint targetPointB = [A convertPoint:a toView:B];(记忆方法:把A上的某个点 ...

  5. css：margin和padding的百分之使用

    #app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...

  6. 使用py2exe转换python文件为可执行程序

    py2exe可以将python脚本转换成在Windows上的可独立执行.exe程序的工具.可以让Python脚本在没有安装python工具的Windows系统上运行,方便脚本共享. 操作环境 pyth ...

  7. 最邻近算法（KNN）识别数字验证码

    应用场景   对于简单的数字型验证码的自动识别.前期已经完成的工作是通过切割将验证码图片切割成一个一个的单个数字的图片,并按照对应的数字表征类别进行分类(即哪些图片表示数字7,哪些表示8),将各种数字 ...

  8. 【原创】字典攻击教务处（BurpSuite使用）

    0x00 本例使用Burp Suite跑字典爆破教务处登录. 使用账户名:yanjiushengdadui 本示例将结合说明Burp Suite的基本使用. 0x01 BurpSuite代理配置 浏览 ...

  9. ArcGIS案例学习笔记3_1_ArcMap编辑练习

    ArcGIS案例学习笔记3_1_ArcMap编辑练习 计划时间:第三天上午 目的:ArcMap编辑练习 教程: pdf page67 数据: gis_ex10/ex07 方法: 1.新建shp文件 目 ...

  10. Python 如何创建2维空数组

    http://blog.csdn.net/yockie/article/details/46127829 myList = [ ( [0] * 3 ) for i in range(4) ] > ...