HTML5 文件上传

HTML5 文件上传

1 filelist对象与file对象:

 1 <input type="file" id="file" multiple>     //multiple可上传多个文件
 2 <input type="button" onclick="showFileName()" value="文件上传">
 3 <script>
 4 function showFileName(){
 5       var file;       //创建file对象
 6       for(var i;i<document.getElementById("file").files.length;i++){
 7           file = document.getElementById(‘file‘).files[i];   //.files
 8           console.log(file.name);
 9        }
10 }
11 </script>

2 Blob对象:表示原始的二进制数据,file继承自blob。

其属性1:size 表示文件大小

属性2:type 表示文件类型  如image/png

1 var file;
2 file = document.getElementById("file").files[0];
3 file.size;     //当前上传文件的大小
4 file.type;    //当前上传文件的类型

3 Filereader对象

包含5个对象:readAsBinaryString    将文件数据读取为二进制数据字符串

readAsText   将文件数据读取为文本数据

readAsDataURL   图像路径

readArrayBuffer

abort       中断

6个事件: onabord

onerror

onloadstart

onload

onloadend

onprogress 监听进度

<input type="file" id="file">
<input type=‘button‘ value=‘读取图像‘ onclick=‘readAsDataURL()‘>
<input type=‘button‘ value=读取二进制’ onclick=‘‘>
<input type=‘button value=‘读取文本文件‘ onclick=‘‘>
<div id=‘result‘ name=‘result>
<script>
var result = document.getElementById(‘result‘);
var file = document.getElementById(‘file‘);

function readAsDataURL(){
         var  file = document.getElementById(‘file‘).files[0];
         var reader  = new FileReader();  //创建filereader对象
         reader.readAsDataURL(file);       //读取图片文件
         reader.onload = function(e){
              var resultimg = document.getElementById(‘result‘);
              resultimg.innerHTML = ‘<img src="‘+this.result+‘"+>‘;
         }
}

function readAsText(){
           var file = document.getElementById(‘file‘).files[0];
           var reader = new FileReader();
           reader.readAsText(file);   //读取文本内容
           reader.onload = function(e){
                var resulttxt = document.getElementById(‘result‘);
                resulttxt.innerHTML = this.result;
           }
}
</script>
时间: 06-26

HTML5 文件上传的相关文章

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖

html5文件上传

<!DOCTYPE html><html><head> <title>Html5 Ajax 上传文件</title></head><body> <progress id="progressBar" value="0" max="100"> </progress> <span id="percentage">&

AJAX文件上传实践与分析,带HTML5文件上传API。

对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可能实现的,因为浏览器的原因,AJAX根本获取不了文件信息,当然这里并不是说就不能文件上传了,只是说在AJAX2.0之前所谓的AJAX文件上传都是假冒的,核心更本没有用AJAX,而是利用iframe实现的,下面我们来看看如何利用iframe实现页面无刷新上传文件. iframe无刷新上传文件版. ht

HTML5 文件上传示例

原文地址: http://www.webcodegeeks.com/html5/html5-file-upload-example/ 本文将为大家展示如何使用HTML5来读取用户选择的文件信息并将文件上传到一个服务器上. FileApi是HTML5新添加的功能中最有趣的一个. 我们可以在文件上传到服务器前读取显示文件的信息, 并且可以不使用post表单的方式来发送文件. 下文将展示如何读取用户选择的文件信息, 并使用Ajax异步上传这些文件. 1.显示文件信息 1.1: 只有一个文件的情况 HT

html5文件上传预览

function DragUploadFile(d) { this.dom = document.getElementById(d); //拖拽的Dom this.FileType; //上传文件类型限制 this.FileTypeNoMsg; //上传文件限制说明 this.imgCallback; //获取文件成功 回调方法 this.AjaxPath; //文件上传路径 this.AjaxCallback; //文件上传完成 回调方法 //阻止浏览器默认事件 document.addEve

html5 文件上传 带进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

HTML5文件上传前本地预览

HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯