jQuery: Ruft den Dateinamen ab, der aus <input type = “file” /> ausgewählt wurde

90

Dieser Code sollte im IE funktionieren (nicht einmal in Firefox testen), aber nicht. Ich möchte den Namen der angehängten Datei anzeigen. Irgendeine Hilfe?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

Überprüfen Sie meine Antwort, ich glaube, es ist der beste und verständlichste Weg, dies zu erreichen.

— James111

147

Es ist so einfach wie das Schreiben:

$('input[type=file]').val()

Wie auch immer, ich schlage vor, Name oder ID-Attribut zu verwenden, um Ihre Eingabe auszuwählen. Und mit event sollte es so aussehen:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

— Denker
quelle

Danke dir! Das hat bei dem vorherigen (und vereinfachten) Problem funktioniert, das ich gestellt habe, aber bei der erweiterten Version funktioniert es nicht.

Wie man den vollständigen Pfad der Datei erhält Der obige Code gibt nur den Dateinamen an.

— Khurram Ijaz

3

@ PHP Priester, du kannst nicht. Browser legen diese Art von Informationen nicht offen.

— Zneak

2

@PHP Priest, wenn Sie das könnten, könnten Sie heimlich Daten über das Dateisystem des Benutzers über AJAX übertragen, und der Benutzer würde es wahrscheinlich nie erfahren. Stellen Sie sich vor, wie viel schlimmer es wäre, wenn Sie den Wert einer Dateieingabe programmgesteuert festlegen könnten . Ja. Sicherheitsprobleme.

— Jinglesthula

1

Das scheint etwas übertrieben? Die Art und Weise, wie ich sie aufgelistet habe, ist viel einfacher und verständlicher.

— James111

20

Der einfachste Weg ist, einfach die folgende Zeile zu verwenden jquery: Wenn Sie dies tun, erhalten Sie keinen /fakepathUnsinn, sondern direkt die hochgeladene Datei:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

Einige andere nützliche Befehle sind:

So erhalten Sie den Namen der Datei:

$('input[type=file]')[0].files[0].name; // This gets the file name

So ermitteln Sie den Dateityp:

Wenn ich ein PNG hochladen würde, würde es zurückkehren image/png

$("#imgUpload")[0].files[0].type

So ermitteln Sie die Größe (in Byte) der Datei:

$("#imgUpload")[0].files[0].size

Außerdem müssen Sie diese Befehle nicht verwenden on('change'. Sie können die Werte jederzeit abrufen. Beispielsweise kann eine Datei hochgeladen werden. Wenn der Benutzer auf klickt upload, verwenden Sie einfach die von mir aufgelisteten Befehle.

— James111
quelle

Warum habe ich einen Fehler erhalten? Die Eigenschaft 'Name' von undefined kann nicht gelesen werden.

— Gagantous

19

$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

Dieser Code wird bei Verwendung nicht C:\fakepath\vor dem Dateinamen in Google Chrome angezeigt .val().

— Anatolii Pazhyn
quelle

4

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>

— Anil Gupta
quelle

Vielen Dank! Dies war hilfreich, um den tatsächlichen Namen der hochgeladenen Datei und nicht den vollständigen Pfad abzurufen.

— Evan M

3

Ich hatte folgendes verwendet, was richtig funktionierte.

$('#fileAttached').attr('value', $('#attachment').val())

— ihmar
quelle

2

//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );

— rotes Quadrat
quelle

1

Fügen Sie eine versteckte Schaltfläche zum Zurücksetzen hinzu:

<input id="Reset1" type="reset" value="reset" class="hidden" />

Klicken Sie auf die Schaltfläche Zurücksetzen, um die Eingabe zu löschen.

$("#Reset1").click();

— Daniel ihr
quelle

1

Können Sie auf eine versteckte Schaltfläche klicken?

— DaveWalley

-1

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>

— Raghuraj Singh Gurjar
quelle

danke mann ich habe danach gesucht ich weiß das ist nicht das

— thema