JavaScript通过filereader接口读取文件

使用FileReader接口的readAsDataURL方法实现图片的预览。

源代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
function readAsDataURL()
{
  if(typeof FileReader=='undifined') //判断浏览器是否支持filereader
  {
    result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
    return false;
  }
  var file=document.getElementById("imagefile").files[0];
  if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件
  {
    alert("请确保文件为图像文件");
    return false;
  }
  var reader=new FileReader();
  reader.readAsDataURL(file);
  reader.onload=function(e)
  {
    var result=document.getElementById("result");
    result.innerHTML='<img src="'+this.result+'" alt=""/>'
  } 

}
</script>
</head> 

<body>
<p>
  <label>请选择一个文件：</label>
  <input type="file" id="imagefile" />
  <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
  <!-- 这里用来显示图片结果-->
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JSP读取文件实例

    //变量声明 java.lang.String strFileName; //文件名 java.io.File objFile; //文件对象 java.io.FileReader objFileReader; //读文件对象 char[] chrBuffer = new char[10]; //缓冲 int intLength; //实际读出的字符数(一个中文为一个字符) //设置待读文件名 strFileName = "d:\\test.txt"; //创建文件对象 objFile

  • node.js读取文件到字符串的方法

    本文实例讲述了node.js读取文件到字符串的方法.分享给大家供大家参考.具体分析如下: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设你是在POSIX环境下运行它Linux 或 Mac OS X. 主要代码如下: var fs = require('fs'); var file = fs.readFileSync(path, "utf8"); console.log(file); 希望本文所述对大家的

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

  • JavaScript使用readAsDataUrl方法预览图片

    本文实例为大家分享了readAsDataUrl方法预览图片的具体代码,供大家参考,具体内容如下 <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta nam

  • javascript HTML5文件上传FileReader API

    文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能.但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道. 未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间.现在好了,WEB技术在进步,HTML5带来了很多好东西.这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性. HTML代码 这个F

  • PHP 读取文件内容代码(txt,js等)

    <?php /* 作者:bjf; 应用:读取文件内容; */ function read_file_content($FileName) { //open file $fp=fopen($FileName,"r"); $data=""; while(!feof($fp)) { //read the file $data.=fread($fp,4096); } //close the file fclose($fp); //delete the file //u

  • node.js实现逐行读取文件内容的代码

    在此之前先介绍一个逐行读取文件内容NPM:https://github.com/nickewing/line-reader,需要的朋友可以看看. 直接上代码: function readLines(input, func) { var remaining = ''; input.on('data', function(data) { remaining += data; var index = remaining.indexOf('\n'); while (index > -1) { var l

  • File, FileReader 和 Ajax 文件上传实例分析(php)

    File, FileReader 和 Ajax 文件上传实例分析(php)

    File FileReader 可以干什么? Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL),2进制字符串(readAsBinaryString),文本(readAsText)并且都是异步的. 对了,Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成. File 对象 File对象可以从 input[type=file].files 数组,和拖拽事件 event.dataTransfer.files 中

  • 借助FileReader实现将文件编码为Base64后通过AJAX上传

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食. 前端对文件进行base64编码并通过ajax向服务器

  • js上传图片预览的实现方法

    本文实例为大家分享了js上传图片预览的方法,供大家参考,具体内容如下 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览</title> <style type="text/css"> #preview{width:260px;

随机推荐