Pobierz nazwę pliku z wejścia [type = 'plik'] przy użyciu jQuery

Question

To jest przesłany formularz.

<form class="alert alert-info"> 
    <div> 
     <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b> 
     <input class="span3" type="file" name="image_file" id="image_file" style="display:none " /> 
     <input disabled="true" type="button" value="Upload image" class="btn" /> 
    </div> 
</form> 

Używam następującego skryptu do otwierania okna z plikami. Chcę pokazać nazwę pliku w <b id = 'select_file'>.

Jak mogę to zrobić?

$('#select_file').click(function(){ 
    var _this = $(this); 
    $('#image_file').show().focus().click().hide(); 

    var filename = $('#image_file').val(); 
    _this.html(filename); 

    $('.btn').attr('disabled', false); 
}); 

Answer 1

Trzeba to zrobić w przypadku zmiany input type file ten sposób:

$('#select_file').click(function() { 
    $('#image_file').show(); 
    $('.btn').prop('disabled', false); 
    $('#image_file').change(function() { 
     var filename = $('#image_file').val(); 
     $('#select_file').html(filename); 
    }); 
});​ 

Answer 2

Nie jest to możliwe ze względów bezpieczeństwa. Przynajmniej nie w nowoczesnych przeglądarkach. Dzieje się tak dlatego, że dowolny kod uzyskujący dostęp do ścieżki pliku może być uważany za niebezpieczny i stanowi zagrożenie bezpieczeństwa. Albo otrzymasz nieokreśloną wartość, pusty ciąg znaków lub błąd zostanie zgłoszony.

Po przesłaniu formularza pliku przeglądarka buforuje plik tymczasowo do katalogu przesyłania, a następnie zostaje przesłana tylko nazwa pliku tymczasowego tego pliku i jego nazwa.

Answer 3

Uzyskanie nazwy pliku jest dość łatwe. Jak wskazuje Matsko, ze względów bezpieczeństwa nie można uzyskać pełnej ścieżki do pliku na komputerze użytkownika.

var file = $('#image_file')[0].files[0] 
if (file){ 
    console.log(file.name); 
} 

Answer 4

Nie ma funkcji jQuery do tego. Musisz uzyskać dostęp do elementu DOM i sprawdzić właściwość files.

document.getElementById("image_file").files[0]; 

Albo

$('#image_file')[0].files[0] 

Answer 5

Był to bardzo ważny problem dla mnie, aby moja strona będzie wielojęzyczna. Oto moja konkluzja przetestowana w Firefoksie i Chrome.

wyzwalacz jQuery przydaje się.

To ukrywa standardowe nudne etykiety type=file. Możesz mimo wszystko umieścić dowolną etykietę i formatować. Dostosowałem skrypt z http://demo.smarttutorials.net/ajax1/. Skrypt umożliwia przesyłanie wielu plików z podglądem miniaturek i korzysta z PHP i MySQL.

<form enctype="multipart/form-data" name='imageform' role="form" ="imageform" method="post" action="upload_ajax.php"> 
    <div class="form-group"> 
     <div id="select_file">Select a file</div> 
     <input class='file' type="file" style="display: none " class="form-control" name="images_up" id="images_up" placeholder="Please choose your image"> 
     <div id="my_file"></div> 
     <span class="help-block"></span> 
    </div> 
    <div id="loader" style="display: none;"> 
     Please wait image uploading to server.... 
    </div> 
    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/> 
</form> 

$('#select_file').click(function() { 
    $('#images_up').trigger('click'); 
    $('#images_up').change(function() { 
     var filename = $('#images_up').val(); 
     if (filename.substring(3,11) == 'fakepath') { 
      filename = filename.substring(12); 
     } // Remove c:\fake at beginning from localhost chrome 
     $('#my_file').html(filename); 
    }); 
}); 

Answer 6

var file = $('#YOURID > input[type="file"]'); file.value; // filename will be,

W Chrome, to będzie coś C:\fakepath\FILE_NAME lub undefined jeśli został wybrany żaden plik.

Jest to ograniczenie lub zamiar, że przeglądarka nie ujawnia struktury pliku lokalnego komputera.

Answer 7

$("#filetosend").prop('files')[0] 

Answer 8

można uzyskać dostęp do właściwości chcesz przechodzących argument do funkcji wywołania zwrotnego (jak evt), a następnie dostęp do plików z nim (evt.target.files[0].name):

$("document").ready(function(){ 
    $("main").append('<input type="file" name="photo" id="upload-photo"/>'); 
    $('#upload-photo').on('change',function(evt) { 
    alert(evt.target.files[0].name); 
    }); 
});