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

<!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. 基于Linux系统的Nagios网络管理模块的实现

    基于Linux 系统的Nagios网络管理模块的实现 1.引言 随着计算机网络的普及,网络管理已成为信息时代中最重要的问题之一.在现有的技术条件下,人们希望有一个更加稳定可靠的网络环境.计算机网络管理 ...

  2. InstallShield详细制作说明(四)

    十.编译打包

  3. Codefroces 831B Keyboard Layouts

    B. Keyboard Layouts time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. Angularjs: 封装layDate指令

    [摘要]由于业务需要,将bootstrap-datetimepicker改成了layDate. layDate是一个较成熟且便于操作的jQuery日期插件,支持同一个视图内范围选择.封装成一个指令在多 ...

  5. l洛谷 P3926 SAC E#1 - 一道不可做题 Jelly

    P3926 SAC E#1 - 一道不可做题 Jelly 题目背景 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢吃蒟蒻果冻.而SOL菌也很喜欢蒟蒻果冻. 有一 ...

  6. shell实例浅谈之三产生随机数七种方法

    一.问题 Shell下有时须要使用随机数,在此总结产生随机数的方法.计算机产生的的仅仅是"伪随机数".不会产生绝对的随机数(是一种理想随机数).伪随机数在大量重现时也并不一定保持唯 ...

  7. MYSQL添加远程用户或允许远程访问三种方法

    添加远程用户admin密码为password GRANT ALL PRIVILEGES ON *.* TO admin@localhost IDENTIFIED BY \'password\' WIT ...

  8. [D3] Build a Line Chart with D3 v4

    Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll ...

  9. Spring拦截器和Servlet过滤器区别

    http://blog.csdn.net/chenleixing/article/details/44573495

  10. android开发-获取wifi列表

    近期博主在学frangment框架,因此想着想着就想通过listfragment完毕对wifi列表的获取. 好! 如今就不说废话了. 一.wifi的基础知识 在Android的官方文档中定义了例如以下 ...