天天看點
傳回

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的形式發送四、檔案壓縮

繼續閱讀