快捷導(dǎo)航

JavaScript判斷文件是否存在的實(shí)例代碼

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

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

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

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

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

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

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

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

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

二、解決方案

提供兩種解決思路

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

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

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

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

            /**
             * 判斷服務(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ù)邏輯可以自行補(bǔ)充，如上可以測試出文件流是否存在，如果存在我們進(jìn)行下載，如果不存在那么給出對應(yīng)的提示，這樣就解決了文件路徑不存在跳轉(zhuǎn)到空白頁面的情況

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