快捷導(dǎo)航

JavaScript判斷文件是否存在的實例代碼

更新時間：2021年05月11日 10:22:23 作者：辰兮要努力

這篇文章主要給大家介紹了關(guān)于JavaScript判斷文件是否存在的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、業(yè)務(wù)場景

最近一直在做和文件上傳和下載相關(guān)的開發(fā)，在涉及到下載的時候，我使用如下的方法進(jìn)行下載

   //獲取或者賦值一個下載路徑
   let downUrl;
   //采用如下的方式可以直接下載文件
   window.location.href = downUrl;

業(yè)務(wù)問題：如果這個文件不存在，會出現(xiàn)頁面跳轉(zhuǎn)的情況；

比如：1、剛好文件存儲服務(wù)器掛機了 2、或者剛好文件存儲服務(wù)器上的文件被人刪除了

如上的不正常訪問都會導(dǎo)致下載功能出現(xiàn)問題，對用戶來說不友好的是出現(xiàn)頁面跳轉(zhuǎn)的情況

這里如果我們在下載的時候知道文件是否存在就可以很好的解決這個問題了

二、解決方案

提供兩種解決思路

1.后端解決：一般文件存儲在文件存儲服務(wù)器是有一個專門的key，看看能否單獨有一個查詢文件是否存在的接口，即下載前根據(jù)文件的唯一key查詢一下文件是否存在，如果存在則執(zhí)行下載的語句，如果不存在，給出用戶對應(yīng)的提示

             if(){
             //如果文件存在下載
             }else{
             //否則給出對應(yīng)的提示
             }

2.前端解決：前端方法判斷文件流是否存在

我給出的是vue里面方法的寫法，供實踐參考

            /**
             * 判斷服務(wù)的文件是否存在
             * @param filepath 文件地址
             * @param filename
             * @returns {Boolean}  
             */
         isExistFile(filepath, filename){
              if(filepath == null || filename == null || filepath === "" || filename ===""){
                return false
               }
              var xmlhttp;
              if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
              }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
              xmlhttp.open("GET",filepath,false);
              xmlhttp.send();
              if(xmlhttp.readyState === 4){
              if(xmlhttp.status === 200) return true; //url存在
              else if(xmlhttp.status === 404) return false; //url不存在
              else return false;//其他狀態(tài)
          }
       }

后續(xù)邏輯可以自行補充，如上可以測試出文件流是否存在，如果存在我們進(jìn)行下載，如果不存在那么給出對應(yīng)的提示，這樣就解決了文件路徑不存在跳轉(zhuǎn)到空白頁面的情況

補充：“流”是一個抽象的概念，它是對輸入輸出設(shè)備的一種抽象理解，在java中，對數(shù)據(jù)的輸入輸出操作都是以“流”的方式進(jìn)行的。