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

90

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>
jquery events copy file-io
sumber
Periksa jawaban saya, saya yakin ini adalah cara terbaik dan paling mudah untuk mencapai hal ini.
Yakobus111

Jawaban:

147

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());
});
Pemikir
sumber
Terima kasih! Itu bekerja pada masalah sebelumnya (dan disederhanakan) yang saya ajukan, tetapi tidak berfungsi pada versi yang diperpanjang.
cara mendapatkan path lengkap dari file kode diatas hanya memberikan nama file.
Khurram Ijaz
3
@PHP Priest, kamu tidak bisa. Browser tidak membeberkan informasi semacam itu.
zneak
2
@PHP Priest, jika Anda bisa melakukan itu, Anda dapat secara diam-diam mengirimkan data tentang sistem file pengguna melalui AJAX dan pengguna kemungkinan besar tidak akan pernah tahu. Bayangkan betapa lebih buruknya jika Anda dapat secara terprogram mengatur nilai input file. Ya. Masalah keamanan.
jinglesthula
1
Ini sepertinya sedikit berlebihan? Cara saya membuat daftar jauh lebih mudah dan bisa dimengerti.
Yakobus111
20

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.

Yakobus111
sumber
mengapa saya mendapatkan kesalahan Tidak dapat membaca 'nama' properti yang tidak ditentukan?
Gagantous
19 
$('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().

Anatolii Pazhyn
sumber
4 
<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 Gupta
sumber
Terima kasih! Ini berguna untuk mengambil nama sebenarnya dari file yang diunggah dan bukan jalur lengkapnya.
Evan M
3

Saya telah menggunakan berikut yang bekerja dengan benar. 

$('#fileAttached').attr('value', $('#attachment').val())
ihmar
sumber
2 
//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );
kotak merah
sumber
1

Tambahkan tombol reset tersembunyi:

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

Klik tombol reset untuk menghapus input.

$("#Reset1").click();
daniel kamu
sumber
1
Bisakah Anda mengklik tombol tersembunyi?
DaveWalley
-1 
<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>
Raghuraj Singh Gurjar
sumber
terima kasih kawan saya sedang mencari ini saya tahu ini bukan subjek tetapi itu jawaban saya, Anda tahu;)
Tarek. Mladly