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

<!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. js09--函数 call apply

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. Five ways to maximize Java NIO and NIO.2--转

    原文地址:http://www.javaworld.com/article/2078654/java-se/java-se-five-ways-to-maximize-java-nio-and-nio ...

  3. Wiz+360云盘，让你的知识库井井有条

    用了wiz快两年了,一些同事看到我在找资料时打开wiz,总会好奇的问这是什么,想到还有很多同仁在用文件夹管理知识库,于是想分享一下我的管理方法.(PS:鄙人愚见,如有高见,望指教) Wiz为知笔记下载 ...

  4. Office GVLK 密钥对照表（kms激活专用）

    Office2016系列: Office Professional Plus 2016:XQNVK-8JYDB-WJ9W3-YJ8YR-WFG99 Office Standard 2016:JNRGM ...

  5. C++基于矢量图形库cairo画图图形

    //sudo apt-get install libcairo2-dev //pkg-config --cflags --libs cairo //-I/usr/include/cairo -I/us ...

  6. [1,2,3].forEach(alert);这样的写法有什么利和弊吗？

    以下这个问题遇到了之后.问了太阳神,以下是太阳神的解答: [1,2,3].forEach(alert);这样的写法有什么利和弊吗? 首先forEach使用方法非常easy降低代码量, 可是也有非常多地 ...

  7. 1.一个WEB应用的开发流程

    先说项目开发过程中团队人员的分工协作. 一.人员安排 毕业至今的大部分项目都是独立完成,虽然也有和其他同事协作的时候,但自认为对团队协作的了解和认知都还有所欠缺.很清楚团队协作的重要性,但尚未有很好的 ...

  8. 基于ContentObserver来动态取消或加入屏幕超时任务

    前面也说了.ContentObserver能够来监控数据库里某一项数据的变化,当然也能够同一时候监控多个数据项的变化. 笔者在项目中须要改动到屏幕超时的需求,比方在车载业务中,倒车事件发生的时候,是不 ...

  9. HDOJ 5409 CRB and Graph 无向图缩块

    无向图缩块后,以n所在的块为根节点,dp找每块中的最大值. 对于每一个桥的答案为两块中的较小的最大值和较小的最大值加1 CRB and Graph Time Limit: 8000/4000 MS ( ...

  10. 微信支付v2开发(8) 维权通知

    本文介绍微信支付中如何获得维权通知. 一.维权通知URL 在 微信支付开发(1) 微信支付URL配置 已提到,维权通知URL为 http://www.doucube.com/wxpay/rights. ...