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> 

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

时间: 2017-05-09

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

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

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

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向服务器

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

javascript HTML5文件上传FileReader API

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

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); 希望本文所述对大家的

JavaScript使用readAsDataUrl方法预览图片

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

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

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

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

js兼容火狐显示上传图片预览效果的方法

本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&

JS上传图片预览插件制作(兼容到IE6)

一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量. ②利用HTML5的新特性FileReader. 这个对象提供了

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

js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码 <div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传"> <input type="file" id="browerfile

js 上传图片预览问题

最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴.故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助. 我们一般根据IE6.IE7进行开发的时候写图片预览的代码是: 复制代码 代码如下: document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 复制代码 代码如下: <d

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

本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) {     var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);     filextension=filextension.toLowerCase();     if ((filext

JS上传图片前实现图片预览效果的方法

本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

JS HTML5拖拽上传图片预览

1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

JS+HTML5实现上传图片预览效果完整实例【测试可用】

本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器. 在网上找了下解决方案,如下所示: <!DOCTYPE HTML> <html> <head> <meta charse

解决Extjs上传图片无法预览的解决方法

复制代码 代码如下: { width: 450, fileUpload: true, fieldLabel: '选择图片', items: [{ xtype: 'textfield', id: 'up_forth', name: 'up_forth', inputType: 'file', width: 300 }] } 预览box 复制代码 代码如下: { columnWidth: .18, bodyStyle: ' margin:4px 10px 10px 5px', layout: 'fo