Wie erhalte ich den Dateinamen, wenn der Benutzer eine Datei über <input type = “file” /> auswählt?

Question 1

Ich habe bereits ähnliche Fragen gesehen, die aus Sicherheitsgründen keine Lösung finden.

Aber heute sehe ich, dass Hostmonster dies erfolgreich implementiert hat, wenn ich ein Ticket öffne und eine Datei in das Backend anhänge.

Es funktioniert sowohl mit Firefox als auch mit IE (Version 8 um genau zu sein).

Ich habe überprüft, dass es sich genau um clientseitiges Scripting handelt. Es wird keine Anfrage gesendet (mit Firebug).

Können wir diese Frage noch einmal überdenken?

Question 2

Sie können den Dateinamen abrufen , aber nicht den vollständigen Pfad des Client-Dateisystems.

Versuchen valueSie, während inputdes changeEreignisses auf das Attribut Ihrer Datei zuzugreifen .

Die meisten Browser geben Ihnen nur den Dateinamen an , aber es gibt Ausnahmen wie IE8, die Ihnen einen falschen Pfad geben, wie: "C:\fakepath\myfile.ext"und ältere Versionen ( IE <= 6 ), die Ihnen tatsächlich den vollständigen Pfad des Client-Dateisystems geben (aufgrund des Fehlens) der Sicherheit).

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

Question 3

Sie können den nächsten Code verwenden:

JS

    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>

Question 4

Ich habe es gerade getestet und es scheint in Firefox & IE zu funktionieren

<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>

Question 5

Ich beantworte diese Frage über Simple Javascript , das in allen Browsern unterstützt wird, die ich bisher getestet habe (IE8 bis IE11, Chrome, FF usw.).

Hier ist der Code.

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>

Erweitern Sie das Snippet

* Bitte beachten Sie, dass die Dateigröße in KB (Kilobyte) angezeigt wird. Um in MB zu gelangen, teilen Sie es durch 1024 * 1024 und so weiter *.

Bei der Auswahl werden solche Dateiausgaben ausgeführt