jQuery: pobierz nazwę pliku wybraną z <input type = „file” />

90

Ten kod powinien działać w IE (nawet nie testuj go w Firefoksie), ale tak nie jest. Chcę wyświetlić nazwę załączonego pliku. Jakaś pomoc?

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

Sprawdź moją odpowiedź, uważam, że to najlepszy i najbardziej zrozumiały sposób na osiągnięcie tego.

— James111

147

To takie proste, jak napisanie:

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

W każdym razie sugeruję użycie nazwy lub atrybutu identyfikatora, aby wybrać dane wejściowe. A w przypadku wydarzenia powinno to wyglądać tak:

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

— Myśliciel
źródło

Dziękuję Ci! To działało w przypadku poprzedniego (i uproszczonego) problemu, który zadałem, ale nie działa w rozszerzonej wersji.

jak uzyskać pełną ścieżkę do pliku powyższy kod podaje tylko nazwę pliku.

— Khurram Ijaz

3

@PHP Priest, nie możesz. Przeglądarki nie ujawniają tego rodzaju informacji.

— zneak

2

@PHP Priest, gdybyś mógł to zrobić, mógłbyś potajemnie przesyłać dane o systemie plików użytkownika przez AJAX, a użytkownik prawdopodobnie nigdy się nie dowie. Wyobraź sobie, o ile gorzej byłoby, gdybyś mógł programowo ustawić wartość pliku wejściowego. Tak. Problemy z bezpieczeństwem.

— jinglesthula

1

Wydaje się to trochę przesadzone? Sposób, w jaki wymieniłem, jest dużo łatwiejszy i zrozumiały.

— James111

20

Najprościej jest po prostu użyć następującego wiersza jquery, używając tego nie zrozumiesz /fakepathbzdur, od razu otrzymasz przesłany plik:

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

Inne przydatne polecenia to:

Aby uzyskać nazwę pliku:

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

Aby uzyskać typ pliku:

Gdybym przesłał plik PNG, zwróciłby się image/png

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

Aby uzyskać rozmiar (w bajtach) pliku:

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

Nie musisz także używać tych poleceń on('change', możesz pobrać wartości w dowolnym momencie, na przykład możesz przesłać plik, a gdy użytkownik kliknie upload, po prostu użyj poleceń, które wymieniłem.

— James111
źródło

dlaczego pojawił się błąd Nie można odczytać właściwości „nazwa” wartości undefined?

— Gagantous

19

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

Ten kod nie pokaże się C:\fakepath\przed nazwą pliku w Google Chrome w przypadku użycia .val().

— Anatolii Pazhyn
źródło

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
źródło

Dzięki! Było to pomocne w pobieraniu rzeczywistej nazwy przesłanego pliku, a nie pełnej ścieżki.

— Evan M

3

Użyłem następujących, które działały poprawnie.

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

— ihmar
źródło

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() );

— plac Czerwony
źródło

1

Dodaj ukryty przycisk resetowania:

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

Kliknij przycisk resetowania, aby wyczyścić wprowadzone dane.

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

— daniel ye
źródło

1

Czy możesz kliknąć ukryty przycisk?

— 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
źródło

dzięki człowieku, szukałem tego, wiem, że to nie jest temat, ale to była moja odpowiedź, wiesz;)

— Tarek.Eladly