<!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. >>> 主页链接

    服 务 & SDK 网易云信|真正稳定的IM即时通讯云服务 微信小程序开发工具下载 百度LBS开放平台 ( 百度地图API示例) 微信JSSDK说明文档 (在线demo) 园 友 京东开涛 W ...

  2. http错误状态码

    http://www.kaiyuanba.cn/html/1/131/226/4258.htm 状态代码有三位数字组成,第一个数字定义了响应的类别,且有五种可能取值:1xx:指示信息--表示请求已接收 ...

  3. 斐讯K2P配置文件破解笔记

    手上有一个斐讯K2P路由器,刷机前我想把原机带的固件备份出来.搜到恩山A大开启telnet.固件备份的教程,里面提到了配置文件破解的方法,心血来潮试了一下,发现算出的密码不能解密,一直报"b ...

  4. 解决myeclipse打开.form文件报错

    症状: 打开AutoEKPMainFrm.form文件的时候出现如下问题:

  5. HTML中title前面小图标和网站收藏现实的图标

    网站上的logo实际上是一个“favicon.ico”图片.实现步骤:第一步:制作favicon.ico,大小为16*16毫米:第二步:将“favicon.ico”放到项目的根路径下. 第三步:在所有 ...

  6. 使用vmtools来设置windows和linux的共享文件夹

    目的:通过vmtools来实现windows和linux的共享文件夹 步骤: 1.前提条件是vmtools已经安装 2.在windows任意磁盘新建一个共享文件夹 3.进入虚拟机->设置-> ...

  7. mysql安装启动 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    首次安装mysql 启动 mysql -uroot 以下错误: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using ...

  8. request.upload.addEventListener in not a function。

    本人在使用vue开发一套后台系统时,碰到了一个上传文件的需求,因为平时做的上传是使用ajax的方式来进行上传. 现在是使用axios来进行上传,方式没有什么改变: npm i  axios  直接上 ...

  9. java 的继承

    1 为什么要使用继承? 为了提取两个类中公共的代码,可以使用继承抽取重复性的代码到一个公共类中,这个公共的类称为父类(super class).继承于父类的类称为子类(sub class). java ...

  10. loadView 与 viewDidLoad 和 didReceiveMemoryWarning与viewDidUnload 详解

    首先试验下:viewController初始化 分两个支路:initWithNibName加载初始化 及 init 直接初始化: <1>调用initWithNibName加载一个xib界面 ...