天天看点
返回

plupload 文件太大 弹出alert_文件与拖放<一>--HTML5

plupload 文件太大 弹出alert_文件与拖放<一>--HTML5

在html5中新增了两个与表单元素相关的api-文件api和拖放api。拖放api可以实现一些有趣的功能，允许我们拖动选项并将其放置到浏览器中的任何地方。这很好地体现了html5作为web应用程序规范的思路，使得开发者可以从桌面计算中借用更多的功能。

一、通过file对象选择文件

在HTML4中，file控件内只允许放置一个文件，

但是到了HTML5中，通过添加multiple属性，在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个

file对象，而FileList对象则为这些file对象的列表，代表用

户选择的所有文件。

File对象有两个属性，name属性表示文件名，不包括路

径，lastModifiedDate属性表示文件的最后修改日期。

<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>FileList与file示例</title>
</head>
<script language=javascript>
function ShowName()
{
    var file;
    //返回FileList文件列表对象
    for(var i=0;i<document.getElementById("file").files.length;i++) 
	{
       //file对象为用户选择的单个文件
        file = document.getElementById("file").files[i];
        //弹出文件名
        alert(file.name);
    }
}
</script>
选择文件：
<input type="file" id="file"size="50"/>
<input type="button" onclick="ShowName();" value="上传文件"/>

二、使用Blob接口获取文件的类型与大小

Blob表示二进制原始数据，它提供一个slice方法(涉及到分片上传)，可以通过该方法访问到字节内部的原始数据块。Blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的MIME类型，如果是未知类型，则返回一个空字符串。

在上面的实例中，对于图像类型的文件，blob对象的type属性都是以

“image/”

 开头的，后面紧跟这图像的类型，利用此特性我们可以在

JavaScript

 中判断用户选择的文件是否为图像文件，如果在批量上传时，只允许上传图像文件，可以利用该属性，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传。 
if(!/image/w+/.test(file.type))
        {
            alert(file.name+"不是图像文件！");
            break;            
}

三、FileReader接口

有一种方法可以检查您的浏览器是否对FileReader接口提供

支持，如下所示：

if ( typeof FileReader === ‘undefined’ )

{

alert( " 您的浏览器未实现 FileReader 接口 " );

} else {

var reader = new FileReader();

// 正常使用浏览器

}

FileReader

的接口拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及它们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

FileReader接口中的属性

FileReader.error

: 读取文件的时候发生的错误信息

FileReader.readyState

:0-2数字，表示FileReader的状态

EMPTY 0 No data has been loaded yet.还没有加载到数据

LOADING 1 Data is currently being loaded.这正在加载数据

DONE 2 The entire read request has been completed.数据加载完成

FileReader.result

:这个是最重要的属性。读取到的内容都存储在了这个属性中。只能在readyState DONE之后才能读取这个属性值。读取到的数据类型取决于用什么的方法去读取的文件。

FileReader接口中的方法

FileReader.abort()

：终止读取文件的操作。这个方法一点结束，则readyState就成为了DONE

FileReader.readAsArrayBuffer()

：开始读取文件的内容，一旦完成，则把文件的数据存储在ArrayBuffer中。当然ArrayBuffer自然会存储在FileReader的result属性中。

FileReader.readAsBinaryString()

：以二进制的形式读取文件的内容。这个方法是非标准方法，不要使用。

FileReader.readAsDataURL()

：将文件读取为DateUrl

FileReader.readAsText()

：将文件的内容读取文本。读取纯文本内容的时候使用。

FileReader接口中的事件

FileReader.onabort

：数据读取被中断时触发。

A handler for the abort event. This event is triggered each time the reading operation is aborted.

FileReader.onerror

：数据读取发生错误时触发。

A handler for the error event. This event is triggered each time the reading operation encounter an error.

FileReader.onload

：数据读取成功后触发。

A handler for the load event. This event is triggered each time the reading operation is successfully completed.

FileReader.onloadstart

：数据开始读取时触发。

A handler for the loadstart event. This event is triggered each time the reading is starting.

FileReader.onloadend

：数据读取完成后触发。不管数据读取成功还是失败都会触发。

A handler for the loadend event. This event is triggered each time the reading operation is completed (either in success or failure).

FileReader.onprogress

：数据读取过程中触发。

A handler for the progress event. This event is triggered while reading a Blob content.

<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>fileReader对象的事件先后顺序</title>
</head>
<script language=javascript>
var result=document.getElementById("result");
var input=document.getElementById("input");
if(typeof FileReader=='undefined')
{
    result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
    input.setAttribute( 'disabled','disabled' );
} 
function readFile()
{
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    reader.onload = function(e)
    {
        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        alert("load");
    }
    reader.onprogress = function(e)
    {
        alert("progress");
    }
    reader.onabort = function(e)
    {
        alert("abort");
    }
    reader.onerror = function(e)
    {
        alert("error");
    }
    reader.onloadstart = function(e)
    {
        alert("loadstart");
    }
    reader.onloadend = function(e)
    {
        alert("loadend");
    }
    reader.readAsDataURL(file);
}
</script> 

<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file" />
<input type="button" value="显示图像" onclick="readFile()" />
</p> 
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>
plupload 文件太大 弹出alert
上一篇: 使用plupload.js上传文件
下一篇: plupload 文件太大 弹出alert_PPT文件太大发不出去？按下这个键，能将100M的PPT变成10M...一、图片压缩二、视频压缩三、以PDF的形式发送四、文件压缩

继续阅读