Получить имя файла из ввода [type='file'] с помощью jQuery

Это загруженная форма.

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

Я использую следующий script, чтобы открыть окно с файлами. Я хочу показать имя файла в <b id = 'select_file'>.

Как я могу это сделать?

$('#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);
});

Ответ 1

Вы должны сделать это в событии изменения input type file следующим образом:

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

Ответ 2

Получение имени файла довольно просто. Как указывает Мацко, вы не можете получить полный путь к файлу на компьютере пользователя по соображениям безопасности.

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

Ответ 3

Для этого нет функции jQuery. Вы должны получить доступ к элементу DOM и проверить свойство файлов.

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

или

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

Ответ 4

Это была очень важная проблема для меня, чтобы мой сайт был многоязычным. Итак, вот мой вывод, протестированный в Firefox и Chrome.

запускается jQuery.

Таким образом, это скрывает стандартные расточные метки type=file. Вы можете разместить любую метку, которую хотите, и отформатировать в любом случае. Я настроил script из http://demo.smarttutorials.net/ajax1/. script позволяет несколько загрузок файлов с предварительным просмотром миниатюр и использует PHP и 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);
   });
});

Ответ 5

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

В Chrome это будет что-то вроде C:\fakepath\FILE_NAME или undefined, если не был выбран файл.

Это ограничение или намерение, что браузер не обнаруживает файловую структуру локальной машины.

Ответ 6

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

Ответ 7

Вы можете получить доступ к свойствам, которые хотите передать аргумент функции обратного вызова (например, evt), а затем получить доступ к файлам с ней (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);
  });
});

Ответ 8

Это невозможно по соображениям безопасности. По крайней мере, не в современных браузерах. Это связано с тем, что любой код, получающий доступ к пути файла, может считаться опасным и представлять угрозу безопасности. Либо вы получите значение undefined, либо пустую строку, либо выдается ошибка.

При отправке формы файла браузер временно временно загружает файл в каталог загрузки и отправляется только временное имя файла этого файла и базовое имя этого файла.