jQuery: получить имя файла, выбранное из <input type = «file» />

Этот код должен работатьв IE (даже не тестируйте его в Firefox), но это не так. Что я хочу, чтобы отобразить имя вложенного файла. Любая помощь?

<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>
 James11126 нояб. 2015 г., 03:02
Проверьте мой ответ, я считаю, что это лучший и самый понятный способ достижения этого.

Ответы на вопрос(8)

//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );
<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 Gupta20 июн. 2015 г., 12:55
Мост Добро пожаловать Эван М
 Evan M04 мая 2015 г., 23:31
Спасибо! Это помогло получить фактическое имя загруженного файла, а не полный путь.
<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>
 Tarek.Eladly18 мар. 2018 г., 22:30
спасибо человек, я искал это, я знаю, что это не тема, но это был мой ответ, вы знаете;)
$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

C:\fakepath\ перед именем файла в Google Chrome в случае использования.val().

Я использовал следующие, которые работали правильно.

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

Добавить скрытую кнопку сброса:

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

Нажмите кнопку сброса, чтобы очистить ввод.

$("#Reset1").click();
 DaveWalley17 апр. 2014 г., 23:06
Можете ли вы нажать скрытую кнопку?

Это так просто, как писать:

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

В любом случае, я предлагаю использовать атрибут name или ID для выбора ввода. А с событием это должно выглядеть так:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});
 ConNen19 авг. 2009 г., 14:48
Спасибо! Это сработало в предыдущей (и упрощенной) задаче, которую я поставил, но не работает в расширенной версии.
 Khurram Ijaz26 апр. 2011 г., 09:12
Как получить полный путь к файлу, приведенный выше код дает только имя файла.
 zneak31 авг. 2011 г., 08:07
@PHP Священник, ты не можешь. Браузеры не предоставляют такую информацию.
 jinglesthula30 нояб. 2011 г., 19:06
@PHP Priest, если бы вы могли это сделать, вы могли бы тайно передавать данные о файловой системе пользователя через AJAX, и пользователь, вероятно, никогда не узнает. Представьте, насколько хуже было бы, если бы вы могли программноустановлен значение файла ввода. Да уж. Проблемы с безопасностью.
 James11126 нояб. 2015 г., 03:01
Это кажется немного сверх? Способ, который я перечислил, намного проще и понятнее.

Самый простой способ - просто использовать следующую строкуjquery, используя это, вы не получите/fakepath ерунда, вы прямо получаете файл, который был загружен:

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

Некоторые другие полезные команды:

Чтобы получить имя файла:

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

Чтобы получить тип файла:

Если бы я должен был загрузить PNG, он бы вернулсяimage/png

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

Чтобы получить размер (в байтах) файла:

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

Также вам не нужно использовать эти командыon('change'Вы можете получить значения в любое время, например, вы можете загрузить файл и когда пользователь нажимаетupload, вы просто используете команды, которые я перечислил.

 Gagantous23 нояб. 2017 г., 15:10
почему я получаю сообщение об ошибке Не удается прочитать свойство 'имя' из неопределенного?

Ваш ответ на вопрос