第一段代码是我自己修改之后能够多选显示多预览图,也就是加了个循环,后面的代码是一些解释说明之类的,抄的

<!DOCTYPE html>

 <html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">

#preview

 {

 width:800px;

 height:800px;

 }

 #preview .img, img

 {

 width:200px;

 height:200px;

 }

 #preview

 {

border:1px solid #000;

}

 </style>

 </head>

<body>

 <div id="preview"></div>

<input type="file" onchange="preview(this)" multiple/>

 <script type="text/javascript">

 function preview(file)

 {

 var prevDiv = document.getElementById('preview');

 if (file.files && file.files[0])

 {

 for(var i=0;i<file.files.length;i++){

var reader = new FileReader();

reader.readAsDataURL(file.files[i]);

 reader.onload = function(evt){

 prevDiv.innerHTML = prevDiv.innerHTML+'<img src="' + evt.target.result + '" />';

}

 }

}

 else

 {

 prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

 }

 }

 </script>

 </body>

 </html>  
用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法

方法名     参数    描述

readAsBinaryString    file    将文件读取为二进制编码

readAsText    file,[encoding]    将文件读取为文本

readAsDataURL    file    将文件读取为DataURL

abort    (none)    终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件

事件    描述

onabort    中断

onerror    出错

onloadstart    开始

onprogress    正在读取

onload    成功读取

onloadend    读取完成，无论成功失败

3、FileReader接口的使用

[html] view plain copy

<script type="text/javascript">

var result=document.getElementById("result");

var file=document.getElementById("file");  

//判断浏览器是否支持FileReader接口

if(typeof FileReader == 'undefined'){

    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";

    //使选择控件不可操作

    file.setAttribute("disabled","disabled");

}  

function readAsDataURL(){

    //检验是否为图像文件

    var file = document.getElementById("file").files[0];

    if(!/image\/\w+/.test(file.type)){

        alert("看清楚，这个需要图片！");

        return false;

    }

    var reader = new FileReader();

    //将文件以Data URL形式读入页面

    reader.readAsDataURL(file);

    reader.onload=function(e){

        var result=document.getElementById("result");

        //显示文件

        result.innerHTML='<img src="' + this.result +'" alt="" />';

    }

}  

function readAsBinaryString(){

    var file = document.getElementById("file").files[0];

    var reader = new FileReader();

    //将文件以二进制形式读入页面

    reader.readAsBinaryString(file);

    reader.onload=function(f){

        var result=document.getElementById("result");

        //显示文件

        result.innerHTML=this.result;

    }

}  

function readAsText(){

    var file = document.getElementById("file").files[0];

    var reader = new FileReader();

    //将文件以文本形式读入页面

    reader.readAsText(file);

    reader.onload=function(f){

        var result=document.getElementById("result");

        //显示文件

        result.innerHTML=this.result;

    }

}

</script>

<p>

    <label>请选择一个文件：</label>

    <input type="file" id="file" />

    <input type="button" value="读取图像" onclick="readAsDataURL()" />

    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />

    <input type="button" value="读取文本文件" onclick="readAsText()" />

</p>

<div id="result" name="result"></div>

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

  1. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  2. js上传图片&预览（filereader）

    fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...

  3. JS 上传图片 + 预览功能（二）

    简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...

  4. JS上传图片预览及图片限制

    HTML代码: <form action="__SELF__" method="post" enctype='multipart/form-data'&g ...

  5. 简单实现JS上传图片预览功能

    HTML代码 <div class="upload"> <input type="button" class="btn" ...

  6. js上传图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js 上传图片预览

    <script language='javascript'> function show(){ var p=document.getElementById("file1" ...

  8. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  9. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

随机推荐

  1. mysql 批量删除数据

    批量删除2000w数据 使用delete from table太慢 //DELIMITER DROP PROCEDURE if EXISTS deleteManyTable; create PROCE ...

  2. 《一》File 类的介绍

    File 类:文件和目录路径名的抽象表示. 注意:File 类只能操作文件的属性,文件的内容是不能操作的.   1.File 类的字段   我们知道,各个平台之间的路径分隔符是不一样的. ①.对于UN ...

  3. python学习三：列表，元组

    1.列表: 1.列表的定义方式: list1 = [1,2,3,4,"hello","world"] 如上所示,list1就是一个列表,列表的内容以中括号包含起 ...

  4. 在Linux下用CANopenSocket协议模拟CAN总线通讯

    一.参考文档 https://github.com/CANopenNode/CANopenSocket //下载 CANopenSocket 的源码 http://elinux.org/Can-uti ...

  5. CentOS不能进入登录界面

    http://blog.csdn.net/powerzone/article/details/6798646

  6. ImportError: No module named tornado.ioloop 记录过程

    ImportError: No module named tornado.ioloop 记录过程 安装 pycurl    pip install pycurl 报错 'curl-config' no ...

  7. shell-查看手机分辨率

    使用如下命令,可以查看手机分辨率 adb shell dumpsys window displays 运行结果如下 Display: mDisplayId= init=1080x1920 480dpi ...

  8. 文件上传流式处理commons-fileupload

    1. 从请求中获取MultipartFile @RequestMapping(value="/upload", method=RequestMethod.POST) public ...

  9. SqlMapConfig.xml全局配置文件解析（mybatis）

    原文  http://www.cnblogs.com/selene/p/4607004.html 一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) set ...

  10. 为什么出现ORM

    ORM(Object Relational Mapping)对象关系映射,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术 . 为什么出现ORM? 面向对象的特征:我们通常使用的开发语言J ...