<!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. P1975 [国家集训队]排队 线段树套平衡树维护动态逆序对查询

    $ \color{#0066ff}{ 题目描述 }$ 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和. 红星幼儿园的小朋友们排起了长长地队伍 ...

  2. 逆向学习-DLL注入

    DLL注入技术,可以实现钩取API,改进程序,修复Bug. DLL注入指的是向运行中的其他进程强制插入特定的DLL文件. DLL注入命令进程自行调用LoadLibrary()API,加载用户指定的DL ...

  3. Boost内存池使用与测试

    目录 Boost内存池使用与测试 什么是内存池 内存池的应用场景 安装 内存池的特征 无内存泄露 申请的内存数组没有被填充 任何数组内存块的位置都和使用operator new[]分配的内存块位置一致 ...

  4. Eclipse Alt + / 快捷键失效

    需要重新设置快捷键.按快捷键ctrl+shirt+L,然后在按一下L.设置快捷键的对话框就出来了,然你将Word Completion移除,在将Content Assist 这个设置为alt+/.就可 ...

  5. docker 查看容器信息---格式化

    镜像,ID,端口号,状态 docker ps -a --format "table {{.Image}}\t{{.ID}}\t{{.Ports}}\t{{.Status}}" 列出 ...

  6. Android中判断service是否在运行

    /** * 判断服务是否开启 * * @return */ public static boolean isServiceRunning(Context context, String Service ...

  7. Jmeter运行badboy录制的脚本

    前言 进行性能测试的站点为:在本地搭建的bugfree 一.badboy录制脚本 1.启动bugfree服务 2.打开badboy进行脚本录制 2.1.打开badboy,按下启动录制按钮,在地址栏中输 ...

  8. 自动化测试之旅--selenium+python--001

    在学习selenium之前,首先感谢网络上的虫师和乙醇老师,或许他们并不知道我这个菜鸟的存在,但是我仍然要感谢他们,因为在学习的路上拜读了许多他们的博客和文章,对于我来说有着很重要的意义,因此在学习之 ...

  9. 关于echar彩色柱状图颜色配置问题

    在做配置页面的时候,有这样一个需求,用户可以选择配置是单色柱状图或者彩色的柱状图,并且颜色可以自定义的 思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建option的值 ...

  10. JSP页面GET传值乱码问题

    两个JSP页面进行GET传值的时候.两个页面的编码都是UTF-8,且传值之前设置response的content为UTF-8也解决不了问题. 设置tomcat的配置文件server.xml:在Conn ...