JavaScript文件與目錄操作技巧

JavaScript設(shè)置表單上傳時文件個數(shù)的方法

這是一個比較實用的功能，用JavaScript來設(shè)置表單上傳文件時，根據(jù)需要生成上傳表單，要幾個生成幾個，在網(wǎng)易郵箱、新浪郵箱的添加附件功能里都有這種功能，不過這一款沒有刪除表單的功能，如果輸入的多了，只好重新來過啦

運行效果如下圖所示：

具體代碼如下：

<title>JavaScript設(shè)置表單上傳時的文件個數(shù)</title>
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="刪除附件" onclick="deleteInput()">
<span id="upload"></span>
<script type="text/javascript">
 var attachname = "attach";
 var i=1;
  function addInput(){
  if(i>0){
   var attach = attachname + i ;
   if(createInput(attach))
    i=i+1;
  }
  } 
  function deleteInput(){
   if(i>1){
   i=i-1;
   if(!removeInput())
    i=i+1;
   }
  } 
  function createInput(nm){ 
  var aElement=document.createElement("input"); 
  aElement.name=nm;
  aElement.id=nm;
  aElement.type="file";
  aElement.size="50";
  //aElement.value="thanks"; 
  //aElement.onclick=Function("asdf()"); 
   if(document.getElementById("upload").appendChild(aElement) == null)
    return false;
   return true;
  } 
  function removeInput(nm){
   var aElement = document.getElementById("upload");
   if(aElement.removeChild(aElement.lastChild) == null)
   return false;
   return true; 
  } 
</script>

JavaScript File API文件上傳預覽

對于基于瀏覽器的應(yīng)用而言，訪問本地文件都是一件頭疼的事情，通常我們能做的僅僅是使用<input type="file">標簽來上傳文件。實現(xiàn)過程是：選取文件的時候value 屬性保存了用戶指定的文件的名稱，表單被提交的時候，瀏覽器會向服務(wù)器發(fā)送選中的文件的內(nèi)容而不僅僅是發(fā)送文件名。再獲取服務(wù)器返回的地址，然后做預覽。
　　

但是如果有一天我們要上傳一個圖片，傳了圖片后預覽想換另一張圖片，就又得先上傳到服務(wù)器再預覽。在網(wǎng)絡(luò)比較慢的情況下，這樣真的很折騰。
　　

所以我們某些時候需要先預覽再上傳到服務(wù)器，特別是一些有剪切功能的需求，例如新浪微博的頭像更換。但是目前能做的只能是借助插件開發(fā)或者使用flash，由于不同瀏覽器的技術(shù)實現(xiàn)不盡相同，為了讓程序能夠支持多瀏覽器，我們的程序就會變得十分復雜而難于維護。幸好現(xiàn)在有了File API。
　　

通過監(jiān)聽change事件我們可得知用戶選擇的文件，并且添加了一個files集合，集合中將包含file對象，每個file對象對應(yīng)著一個文件。并且都有以下只讀屬性name,size,type,lastModifiedDate.
以<input type="file" name="file">為例，監(jiān)控onchange事打印它的file對象：

由此我們可得知用戶選取的文件格式，文件名以及文件大小等等的一些信息。因此我們很容易就能為所選取的文件作驗證判斷是否符合我們定的一些要求。

除此之外File API還提供了FileReader類型讀取文件中的數(shù)據(jù)。

FileReader類型實現(xiàn)的事一種異步文件讀取機制，類似于XMLHttpRequest，但是它讀的是文件系統(tǒng)而不是遠程服務(wù)器。并且提供了幾種讀取方法：

• readAsText(file,encoding)：以純文本形式讀取文件，將讀取到的文本保存在result屬性中，第二個參數(shù)用于指定編碼類型，可選。
• readAsDataURL(file)：讀取文件以數(shù)據(jù)URL的形式保存在result屬性中。
• readAsBinaryString(file)：讀取文件并將一個字符串保存在result屬性中。
• readAsArrayBuffer(file)：讀取文件并將一個包含文件人容的ArrayBuffer保存在result屬性中

通過以上方法分別讀取同一張本地圖片，并且把保存在result屬性中的信息打印出來對比如下：

readAsText(file,encoding):

readAsDataURL(file):
通過以上對比我們發(fā)現(xiàn)這些讀取文件的方法為靈活的處理文件數(shù)據(jù)提供了極大的方便。例如讀取圖像文件并且保存為數(shù)據(jù)url，可以做上傳前的預覽功能。
　　

由于讀取的過程是異步的，所以FileReader里面有幾個事件分別處理不同的情況：progress(是否讀取了新數(shù)據(jù))、erro(是否發(fā)生了錯誤)、load(是否已經(jīng)讀完了整個文件)。
　　

由于種種原因無法讀取文件就會觸發(fā)error事件，觸發(fā)error事件的時會有一個屬性code(錯誤碼)保存在FileReader的error屬性里面的一個對象中。
使用FileReader做上傳預覽的例子：

HTML：

<label class="item_label">上傳照片：
 <span style="width: 100px; height: 100px;border:1px solid #ccc; display:inline-block"><img src="#" id="uploadPreview" style="width: 100%; height: 100%;"></span>
 <input type="file" name="file" id="postFile" style="width:74px;">
 <span id="error_text" style="display: none;">提示</span>
</label>
　　
JavaScript：

document.getElementById('postFile').onchange = function() {
 var val = this.value;
 var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上傳的格式
 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //從字符串中抽出最后一次出現(xiàn).之后的字符，并且轉(zhuǎn)換成小寫
 var result = upLoadType.indexOf(fileExt); //查找后綴名是否符合條件，如果符合返回>=0，如果不符合則返回負數(shù);
 _alertMsg = $('#error_text');
 var oFReader = new FileReader();
 if (this.files.length === 0) { return; }
 var oFile = this.files[0]; //如果只有一個文件則只需要訪問這個FileList對象中的第一個元素.
   
 if (oFile.size / 1024 < 100) {
  _alertMsg.html("<font style='color:blue'>√</font>").show()
 };
 if (result < 0) {
  _alertMsg.html("請輸入正確格式:" + upLoadType).show();
 } else{
  _alertMsg.html("<font style='color:blue'>√</font>").show();
 };
  
 oFReader.readAsDataURL(oFile); // 開始在后臺進行讀取操作。當圖像文件的所有內(nèi)容加載后,他們轉(zhuǎn)換成一個data:URL,傳遞到onload回調(diào)函數(shù)中
 oFReader.onload = function (oFREvent) { //當讀取操作成功完成時調(diào)用.
  document.getElementById("uploadPreview").src = oFREvent.target.result;
 };
};

JavaScript獲取當前運行腳本文件所在目錄的方法

代碼如下：

DirectoryUtility = {
  // function getCurrentDirectory: returns currentDirectory path 
  // with a trailing backslash.
  getCurrentDirectory : function ( ) {
    var scriptFullName = WScript.ScriptFullName;
    var scriptName = WScript.ScriptName;
    return scriptFullName.substr ( 0, scriptFullName.lastIndexOf ( scriptName ) );
  }
}
/* 用法 */
DirectoryUtility.getCurrentDirectory ( );

Javascript中使用A標簽獲取當前目錄的絕對路徑方法

一談到路徑相關(guān)的問題，大家都會往window.location上想，確實這個對象提供了相當多的路徑信息，其中常用的就包括：

1.location.href：當前頁面的完整URL
2.location.pathname：當前URL中的路徑名
3.location.hash：當前URL中的錨點
4.location.search：當前URL中的查詢參數(shù)

然而，location沒有一個屬性能直接獲得當前目錄（不含文件名）的絕對路徑。通過Google我發(fā)現(xiàn)了一些錯誤的方法，比如說把URL通過“/”分離成數(shù)組，把數(shù)組的最后一項去掉以后再連接成字符串。但如果URL中沒有指定文件名，結(jié)果就大錯特錯了。

根據(jù)以往編碼的經(jīng)驗，a元素的href屬性總是會返回絕對路徑，也就是說它具有把相對路徑轉(zhuǎn)成絕對路徑的能力。使用下面的代碼嘗試了一下，果然成了：