<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src = "jquery.js"></script>

</head>

<body>

<input id="upload" type="file" name="files" />

<div id = "box">

</div>

<script type="text/javascript">

var upload = document.getElementById('upload');

upload.addEventListener('change', function() {

      var file = upload.files[0];

      console.log(file.size);

      var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function(e) {

      // var img = new Image();

      // img.src = this.result;

      // console.log(this.result);

      src = this.result;

      $('#box').append(

              "<img src ="+src+ ">"

          )

    };

}, false);

</script>

</body>

</html>

http://www.open-open.com/lib/view/open1456113131948.html

js上传并且预览图片的更多相关文章

  1. js上传和预览图片

    [1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. 富文本编辑器handyeditor，上传和预览图片的host地址不一样

    使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...

  4. 原生JS上传,实现预览并且兼容大部分IE

    // 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...

  5. js 上传文件预览

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. CentOS安装搭建zookeeper

    原文连接:https://www.cnblogs.com/rwxwsblog/p/5806075.html zookeeper集群搭建(三台) 注意关闭机器防火墙! 配置ip别名:编辑文件  # /e ...

  2. 动态sql语句和动态传入参数个数

    1.可以将要传入的几个参数封装成一个实体类,然后将实体类作为一个参数传入到相应的方法中,这时候就需要这sqlMapper.xml文件中对传入的字段利用<if test=""& ...

  3. Mac 更改/usr/bin 目录权限失败

    对于Mac OS X 10.11 El Capitan用户,由于系统启用了SIP(System Integrity Protection), 导致root用户也没有权限修改/usr/bin目录.按如下 ...

  4. python学习，day3：示例，进度条

    # coding=utf-8 # Author: RyAn Bi import sys,time for i in range(50): sys.stdout.write("#") ...

  5. MySQL使用UNIQUE实现数据不重复插入

    unique列在一个UNIQUE键上插入包含重复值的记录时,我们可以控制MySQL如何处理这种情况:使用IGNORE关键字或者ON DUPLICATE KEY UPDATE子句跳过INSERT.中断操 ...

  6. [转] Spark快速入门指南 – Spark安装与基础使用

    [From] https://blog.csdn.net/w405722907/article/details/77943331 Spark快速入门指南 – Spark安装与基础使用 2017年09月 ...

  7. ajax session timeout

    授权过期后AJAX操作跳转到登录页的一种全局处理方式 菜鸟程序员之Asp.net MVC Session过期异常的处理 基于WebImage的图片上传工具类

  8. 【Python 解决错误】selenium.common.exception.WebDriverException

    近来准备写个脚本去搜索某端游的官网交易平台.因为也不懂高端的爬虫技术,决定用selenium去戳.这里采用的是chrome浏览器,链接网页时报错: File "C:\Python37\lib ...

  9. Java_方法的基本语法格式

    [修饰符] 返回值类型 方法名称([参数列表]){ 方法体 } [ ]中的内容是可有可无的 暂时将方法的修饰符编写为 public static 返回值类型有两种情况 : 第一种:无返回值类型,也就是 ...

  10. spring cloud知识点

    eureka注册中心(zookeeper,eureka) 也要集群,可以相互注册,网状结构.后面很多高可用的服务都是用这种方式.Eureka的客户端缓存技术 spring boot actuator ...