jQuery: dapatkan nama file yang dipilih dari <input type = “file” />

Question 1

Kode ini seharusnya berfungsi di IE (bahkan jangan mengujinya di Firefox), tetapi tidak. Yang saya inginkan adalah menampilkan nama file terlampir. Ada bantuan?

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

Question 2

Ini sesederhana menulis:

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

Bagaimanapun, saya sarankan menggunakan atribut nama atau ID untuk memilih masukan Anda. Dan dengan acara, akan terlihat seperti ini:

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

Question 3

Cara termudah adalah dengan hanya menggunakan baris berikut jquery, dengan menggunakan ini Anda tidak mendapatkan /fakepathomong kosong, Anda langsung mendapatkan file yang telah diunggah:

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

Beberapa perintah berguna lainnya adalah:

Untuk mendapatkan nama file:

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

Untuk mendapatkan jenis file:

Jika saya mengunggah PNG, itu akan kembali image/png

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

Untuk mendapatkan ukuran (dalam byte) file:

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

Anda juga tidak harus menggunakan perintah ini on('change', Anda bisa mendapatkan nilainya kapan saja, misalnya Anda mungkin memiliki file yang diunggah dan ketika pengguna mengklik upload, Anda cukup menggunakan perintah yang saya daftarkan.

Question 4

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

Kode ini tidak akan ditampilkan C:\fakepath\sebelum nama file di Google Chrome jika digunakan .val().

Question 5

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

Question 6

Saya telah menggunakan berikut yang bekerja dengan benar.

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

Question 7

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

Question 8

Tambahkan tombol reset tersembunyi:

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

Klik tombol reset untuk menghapus input.

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

Question 9

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