Jak uzyskać nazwę pliku, gdy użytkownik wybierze plik za pomocą <input type = "file" />?

Już wcześniej widziałem podobne pytania, które kończą się brakiem rozwiązania ze względów bezpieczeństwa.Jak uzyskać nazwę pliku, gdy użytkownik wybierze plik za pomocą <input type = "file" />?

Ale dzisiaj widzę, że hostmonster z powodzeniem zaimplementował to, kiedy otwieram bilet i załączam plik do ich zaplecza.

Działa zarówno w firefoxie, jak i IE (dokładniej w wersji 8).

Sprawdziłem, że to dokładnie skrypty po stronie klienta, żadne żądanie nie jest wysyłane (z firebug).

Teraz możemy ponownie rozważyć to pytanie?

Źródło

2010-02-03 user198729

Co masz na myśli przez "get a file name"? Czy nazwa pliku nie jest oczywista, ponieważ użytkownik właśnie go wybrał? –

Można uzyskać nazwę pliku , ale nie można uzyskać pełnej ścieżki systemu plików klienta.

Spróbuj uzyskać dostęp do atrybutu value pliku input w wydarzeniu change.

Większość przeglądarek daje tylko nazwę plików, ale są wyjątki, takie jak IE8 która daje fałszywy ścieżkę jak: "C:\fakepath\myfile.ext" i starszych wersjach (IE < = 6), który faktycznie daje pełną ścieżkę systemu plików klienta (z powodu braku bezpieczeństwa).

document.getElementById('fileInput').onchange = function() { 
    alert('Selected file: ' + this.value); 
};

Źródło

2010-02-03 04:27:52 CMS

Otrzymuję 'C: \ fakepatha \ ...' w chrome, ale jest to w porządku dla moich celów. Dzięki. – Squirrl

Dotyczy to przyczyny bezpieczeństwa. Witryny sieci Web nie mogą uczyć się ścieżki folderu użytkownika. – kodmanyagha

+29

Czyścić to tak: 'f = f.replace (/.*[\/\\]/, '');' –

właśnie testowane w ten sposób i wydaje się działać w firefox & IE

<html> 
    <head> 
     <script type="text/javascript"> 
      function alertFilename() 
      { 
       var thefile = document.getElementById('thefile'); 
       alert(thefile.value); 
      } 
     </script> 
    </head> 
    <body> 
     <form> 
      <input type="file" id="thefile" onchange="alertFilename()" /> 
      <input type="button" onclick="alertFilename()" value="alert" /> 
     </form> 
    </body> 
</html>

Źródło

2010-02-03 04:32:46

To interesujące. Kiedy to zrobię, otrzymuję 'C: \ fakepath \ background.jpg'. Dosłownie to. –

będę odpowiedzieć na to pytanie poprzez Proste JavaScript, który jest obsługiwany we wszystkich przeglądarkach, które ja testowałem do tej pory (IE8 do IE11, Chrome, FF itp.).

Oto kod.

function GetFileSizeNameAndType() 
 
     { 
 
     var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE. 
 

 
     var totalFileSize = 0; 
 

 
     // VALIDATE OR CHECK IF ANY FILE IS SELECTED. 
 
     if (fi.files.length > 0) 
 
     { 
 
      // RUN A LOOP TO CHECK EACH SELECTED FILE. 
 
      for (var i = 0; i <= fi.files.length - 1; i++) 
 
      { 
 
       //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE 
 
       var fsize = fi.files.item(i).size; 
 
       totalFileSize = totalFileSize + fsize; 
 
       document.getElementById('fp').innerHTML = 
 
       document.getElementById('fp').innerHTML 
 
       + 
 
       '<br /> ' + 'File Name is <b>' + fi.files.item(i).name 
 
       + 
 
       '</b> and Size is <b>' + Math.round((fsize/1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB 
 
       + 
 
       '</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>."; 
 
      } 
 
     } 
 
     document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize/1024) + "</b> KB"; 
 
    }

<p> 
 
     <input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" /> 
 
    </p> 
 

 
    <div id="fp"></div> 
 
    <p> 
 
     <div id="divTotalSize"></div> 
 
    </p>

* Należy pamiętać, że są wyświetlane Wielkość pliku w kB (kilobajtach),. Aby uzyskać MB, podziel go przez 1024 * 1024 itd. *.

To będzie wykonywać wyjść plików, takich jak te na wybranie

Źródło

2017-03-18 17:18:08 vibs2006

Można użyć następny kod:

function showname() { 
     var name = document.getElementById('fileInput'); 
     alert('Selected file: ' + name.files.item(0).name); 
     alert('Selected file: ' + name.files.item(0).size); 
     alert('Selected file: ' + name.files.item(0).type); 
    };

HTML

<body> 
    <p> 
     <input type="file" id="fileInput" multiple onchange="showname()"/> 
    </p>  
</body>

Źródło

2017-04-04 14:09:24

To wszystko! Dzięki. – Andrey

Jak uzyskać nazwę pliku, gdy użytkownik wybierze plik za pomocą <input type = "file" />?

Odpowiedz

Powiązane problemy