<!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. 编程开发之--Oracle数据库--存储过程和存储函数（1）

    1.存储过程和存储函数 描述:指存储在数据库中供所有用户程序调用的子程序叫做存储过程.存储函数 区别:存储函数可以通过return子句返回一个函数的值 (1)存储过程 语法:create [or re ...

  2. Linux下与Windows下开发软件

    Linux下开发程序可以完全发挥自己的聪明才智,因为系统内核是完全开放的.Windows下开发程序就稍微郁闷一点,不论何种语言都必须在调用系统API的基础上开发,因为系统内核是不开放的. 这两种系统正 ...

  3. idea validation code

    K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  4. 用代码如何检测一个android程序是否在运行

    /** * 检测一个android程序是否在运行 * @param context * @param PackageName * @return */ public static boolean is ...

  5. Word常用定义的变量

    unit U_WordConst;  interface {*******Word窗体状态************} const   wdWindowStateNormal = $00000000;  ...

  6. 大数据技术之_16_Scala学习_13_Scala语言的数据结构和算法_Scala学习之旅收官之作

    第十九章 Scala语言的数据结构和算法19.1 数据结构(算法)的介绍19.2 看几个实际编程中遇到的问题19.2.1 一个五子棋程序19.2.2 约瑟夫问题(丢手帕问题)19.2.3 其它常见算法 ...

  7. Java中子类覆盖父类方法所必须满足的条件

    因为太喜欢,所以转来,侵删! 参考自:http://www.it165.net/pro/html/201504/39284.html 一.描述 子类重写(覆盖)父类的方法必须满足的条件:1.父类中的方 ...

  8. Linux中让普通用户拥有超级用户的权限

    问题 假设用户名为:ali 如果用户名没有超级用户权限,当输入 sudo + 命令 时, 系统提示: ali is not in the sudoers file.  This incident wi ...

  9. 从websphere6.1迁移到weblogic10.3的问题总结--转

    http://blog.itpub.net/9399028/viewspace-692974/ 以前用weblogic低版本的时候,感觉挺容易的,也没什么要注意的,这次真正把应用从websphere迁 ...

  10. Java 字符串（String）格式转json格式

    json是前后端传输数据的一种文本格式,json其实就是字符串,因为前后端传输数据时,只能传输字符串,我们又想传一些对象或者列表信息,这都是很常见的应用场景. 所以,我们需要在java代码中,把jav ...