<!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. Azure Powershell获取Azure虚拟机的操作系统型号及具体版本

    Azure ARM 模式虚拟机: 1.登陆Azure账号 Add-AzureRmAccount -EnvironmentName AzurechinaCloud 2.选择指定订阅 Select-Azu ...

  2. jquer 使用原生DOM对象

    js中使document.getElementById("ID"); Jquery中可以使用$("#id") 或者$("#id").get( ...

  3. SQL语句之用户管理

    SQL语句系列 1.SQL语句之行操作 2.SQL语句之表操作 3.SQL语句之数据库操作 4.SQL语句之用户管理 占坑,待写……

  4. form表单提交到Controller之后空值变成逗号

    首先这个错误不是我遇到的,是别人遇到来找我给帮忙调试的(我不会犯这种错误!!!) 错误非常神奇,前端页面的form表单是空的啥都没填,提交到后台之后(后台用@ModelAttribute实体类接受的) ...

  5. WinScp结合Putty在Windows与UNIX之间进行文件传输

    1. 关于传输协议: SSH Secure Shell安全外壳协议 SFTP Secure File Transfer Protocal安全文件传送协议 2. WinScp与Putty的作用: Put ...

  6. stm32cubemx 固件安装

    STM32CubeMX 可以在线安装固件库,也可以离线安装 1  在线安装 安装好之后,选项框显示为绿色 2  离线安装 先下载固件包 F1 : https://www.st.com/en/embed ...

  7. vue中的坑 --- 锚点与查询字符串

    在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...

  8. Netty构建Http服务器

    Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络 ...

  9. 使用group by rollup和group by cube后的辅助函数

    本文主要介绍,报表在使用group by rollup和group by cube后的辅助函数. CREATE TABLE TEST8 ( "ID" NUMBER, "O ...

  10. CentOS 6.5中配置RabbitMQ

    先配置erlang依赖环境 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel 安装erlang 1 ...