javascript 使用Html5 File Api進行文件讀取

時間 2019-11-18

標籤 javascript 使用 html5 html file api 進行文件讀取欄目 JavaScript 简体版

原文原文鏈接

javascript 使用Html File Api進行文件讀取，注意「讀取」是隻讀不寫，不能夠主動獲取瀏覽器所在主機的文件列表。javascript

Html5 中 FileApi主要有 FileUpload, File,FileList,FileError，Blob，FileReader,DataTransfer。css

這裏主要測試File.所以有必要給一個 test targethtml

<form action="javascript:void(0)" method="post" enctype="mutipart/form-data">
	<input type="file" name="upfile" id="upfile" accept="image/*" multiple="multiple" />
</form>

一. FileUpload是本質是file input 的封裝，也是 html4.01 和 xhtml 1.0 的api 這裏不在多講

二. File 是文件對象html5的對象，在html5中，每個被加入到file input中的文件都是一個對象，注意，這個對象通常沒法手動生成（安全性考慮）。

var upfile = document.querySelector('#upfile');

upfile.onchange = function(evt)
{
  var e = evt || window.event;
  if(upfile.files.length>0)
  {
      alert((upfile.files[0] instanceOf File));
   }
}

File的公開Api有（文件路徑沒法看見吧）

lastModified
lastModifiedDate
name
type

三.FileList是一個文件列表 List，這個api不多

var upfile = document.querySelector('#upfile');

upfile.onchange = function(evt)
{
  var e = evt || window.event;
  if(upfile.files)  // upfile.files，通常來講這個對象也是由系統提供的，不能夠本身生成
  {
      alert(upfile.files);
   }
}

主要api屬性

length
item(index)

四.FileError這個類能夠本身生成，主要用來提示文件操做中的錯誤，如下基本爲常量，可直接使用【類名.屬性】

ABORT_ERR: 3
ENCODING_ERR: 5
INVALID_MODIFICATION_ERR: 9
INVALID_STATE_ERR: 7
NOT_FOUND_ERR: 1
NOT_READABLE_ERR: 4
NO_MODIFICATION_ALLOWED_ERR: 6
PATH_EXISTS_ERR: 12
QUOTA_EXCEEDED_ERR: 10
SECURITY_ERR: 2
SYNTAX_ERR: 8
TYPE_MISMATCH_ERR: 11

五.Blob是二進制數據，在某些時候，爲了讓數據庫可以存儲各種數據，手寫須要把數據轉爲Blob數據才行，在H5中有以下例子

var htmlParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];  
var myBlob = new Blob(htmlParts, { "type" : "text\/xml" });  //2個參數都是可選，第一個是數組，第二個是 mine-type

//下面是一個利用Blob對象，生成可下載文件的例子。  
var blob = new Blob(["Hello World"]);  
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt"; 
a.textContent = "Download Hello World!";  
body.appendChild(a);

//也能夠和FormData配合使用來上傳文件
var formData = new FormData();

// Files formData.append(field, file, filename); 
// Blobs formData.append(field, blob, filename);

//固然也可使用ajax直接發送數據
xhr.send(blob); //目前未見到如何使用，但願讀者自行檢索網絡相關信息

六.FileReader文件讀物器，用於讀取客戶端文件到，注意，文件讀取完畢後並不會載入緩存

var upfile = document.querySelector('#upfile');
var fileReader = new FileReader();
fileReader.onload = function(evt)
{  
    if(FileReader.DONE==fileReader.readyState)
    {
         var img =  document.createElement('img');
         img.src = this.result; //是Base64的data url數據
         document.body.appendChild(img);
         console.log(fileReader);
     }
}
fileReader.readAsDataURL(upfile.files[0]);

相關apihtml5

error: null
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
readyState: 
result:
DONE: 2
EMPTY: 0
LOADING: 1
abort: 
function abort() 
function readAsBinaryString: 
function readAsBinaryString(File Object) 
function readAsDataURL(File Object)
function readAsDataURL(File Object)
function readAsText(File Object);

七.DataTransfer 與DataTransferItemList數據傳輸對象，這類API主要應用於頁面數據的交互，如拖拽上傳，拖拽選擇等方面

注意：這個對象時事件由對象來生成，因此通常和拖拽搭配使用java

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
  ev.preventDefault();
}

function drag(ev)
{
   ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

或者拖拽外部文件進行數據複製和傳輸web

<!doctype  html>
<html>
<head>
    <meta charset="utf-8" />
    <title>www.meiweimimi.com/fqa/</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
</head>
<body>
	
<div id="drag" style="font-size:20px;padding:25px;border:1px dashed #666;text-align:center;color:#bbb;margin-bottom:10px">
將文件拖到此處
</div>
	

<script type="text/javascript" >
	
	function dropHandler(e) 
	{
    	  e.stopPropagation();
    	  e.preventDefault();

    	var files = e.dataTransfer.files;
    	 for(var i = 0, len = files.length; i < len; i++)
    	 {
        	var f = files[i];
        	console.log(f);
    	 }
   
 	}

	function dragOverHandler(e) 
	{
    	  e.stopPropagation();
    	  e.preventDefault();
    	  e.dataTransfer.dragEffect = 'copy'; //設置當拖拽到指定區域時，讓文件可被複制
	}

	function dragStartHandler(e)
	{

	}
	
	var drag = document.getElementById('drag');
	drag.addEventListener('drop', dropHandler, false);
	drag.addEventListener('dragover', dragOverHandler, false);
	drag.addEventListener('dragover', dragStartHandler, false);

</script>

</body>
</html>

這些DataTransfer的是主要apiajax

其中 setDragImage是拖拽時要顯示的效果圖，evt.dataTransfer.setDragImage(imageObject,x,y);數據庫

if (event.dataTransfer.setDragImage) {                       
         var rainbow = document.getElementsByTagName('img')[0];
         event.dataTransfer.setDragImage (rainbow, 0, 0);
  }

try doing itapi

相關標籤/搜索