jQuery: krijgen de bestandsnaam geselecteerd uit & lt; input type = “file” / & gt;

Deze code zou moeten werken in IE (zelfs niet testen in Firefox), maar het niet.
Wat ik wil is om de naam van het bijgevoegde bestand te openen. Alle hulp?

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

Antwoord 1, Autoriteit 100%

Het is zo’n simpel als schriftelijk:

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

Hoe dan ook, ik stel voor gebruik van de naam of ID attribuut om uw ingang te selecteren.
En met geval moet er als volgt uitzien:

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

Antwoord 2, Autoriteit 14%

De eenvoudigste manier is om gewoon gebruik maken van de volgende regel van jquery, met behulp van deze u niet de /fakepathonzin, je recht omhoog krijgt het bestand dat was te krijgen geüpload:

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

Enkele andere handige commando’s zijn:

Om de naam van het bestand te krijgen:

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

Om het type van het bestand te krijgen:

Als ik een PNG uploaden, het zou terugkeren image/png

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

Om de maat te krijgen (in bytes) van het bestand:

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

Ook hoef je niet op deze berichten on('change', kunt u de waarden op elk moment, bijvoorbeeld, kunt u een bestand uploaden en wanneer de gebruiker klikt hebben upload, u gewoon gebruik maken van de commando’s I opgenomen.


Antwoord 3, Autoriteit 13%

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

Deze code wordt niet weergegeven C:\fakepath\vóór de bestandsnaam in Google Chrome in het geval van het gebruik van .val()


Antwoord 4, Autoriteit 3%

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

Antwoord 5, autoriteit 2%

Ik had het volgende gebruikt, wat correct werkte.

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

Antwoord 6

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

Antwoord 7

Voeg een verborgen reset-knop toe:

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

Klik op de resetknop om de invoer te wissen.

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

Antwoord 8

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

Other episodes