<body>

    <input type="file" id="file_input" onchange="show_image()" />

    <img src="" alt="" id="show_img" width="100px" height="100px" style="display: none;" />

</body>

<script>

    function show_image() {

        //首先获取到文件输入框和img元素

        file_input = document.getElementById("file_input");

        show_img = document.getElementById("show_img");

        //创建URL对象

        show_img.src = window.URL.createObjectURL(file_input.files[0]);

        //显示图片

        show_img.style.display = 'block';

    }

</script>

总结一下，就是使用window.URL.createObjectURL()方法使用文件域中的文件创建一个URL对象赋值给img的src属性，即时在网页中显示出来

JavaScript实现上传图片预览[js前端实现]的更多相关文章

  1. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  3. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  4. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  5. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  7. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  8. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  9. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

随机推荐

  1. [转载]前端构建工具gulpjs的使用介绍及技巧

    转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

  2. php流程管理

    流程控制即某个人发起一个流程,通过一层一层审核,通过后,完成整个流程,若有一层审核未通过,中断整个流程.即结束! 比如请假流程: 某一员工发起一个请假流程,那么这个流程的节点人员即他的上级,上上级,上 ...

  3. Array和ArrayCollection作为数据源的一个应用区别

    在不用[Enabled]元标签的前提下,将一个Array赋值给DataGrid.DataList等控件的DataProvider后,当Array值发生改变时,控件显示内容不会及时更新(可调用控件的in ...

  4. Hibernate考试试题（部分题库）含答案

    Hibernate考试试题 (题库) 1.  在Hibernate中,下列说法正确的有( ABC ).[选三项] A．Hibernate是一个开放源代码的对象关系映射框架 B．Hibernate对JD ...

  5. PHP获取Post的原始数据方法小结(POST无变量名)

    From : http://blog.csdn.net/hotdigger/article/details/6456240   一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST ...

  6. MySQL安装、输入密码闪退、workbench使用

    1.安装 安装就不细说了,网上一搜一大堆,但是教程推荐这个: wikihow 网站是wikiHOW,很有意思的网站,比百度经验强大很多. 2.输入密码闪退 安装完成后,在开始菜单,打开 开始程序 界面 ...

  7. iOS关于Cookie验证登录状态

    1.第一次进入应用,登录获取Cookie,此时如果用到的是AFN去获取接口数据,Cookie已经写入了,所以无需处理,每次请求的时候,会自动将该cookie传给后台去验证 2.将Cookie缓存到本地 ...

  8. C++高精度模板

    原文地址:http://blog.csdn.net/wall_f/article/details/8373395 原文只附代码,没有解析,本文增加了一些对代码的解释. 请注意:本模板不涉及实数运算与负 ...

  9. 由于losf引起的pxc启动报错处理

    PXC主节点启动完成后,再启动node1,error日志报错: 2017-05-02T15:23:42.830888Z 0 [ERROR] WSREP: Failed to read 'ready & ...

  10. c#无限循环线程如何正确退出

    c#无限循环线程如何正确退出 在主程序将要结束时,迅速正确退出无限循环执行的子线程.一般子线程循环执行会有一个指定的周期, 在子线程等待(或者睡眠)时,无法唤醒退出,尤其在执行周期较长时,子线程无法即 ...