jQuery: lấy tên tệp được chọn từ <input type = “file” />

Question 1

Mã này sẽ hoạt động trong IE (thậm chí không kiểm tra nó trong Firefox), nhưng nó không. Những gì tôi muốn là hiển thị tên của tệp đính kèm. Bất kỳ giúp đỡ?

<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

Nó chỉ đơn giản như viết:

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

Dù sao, tôi khuyên bạn nên sử dụng thuộc tính tên hoặc ID để chọn đầu vào của bạn. Và với sự kiện, nó sẽ trông như thế này:

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

Question 3

Cách đơn giản nhất là chỉ cần sử dụng dòng sau jquery, sử dụng điều này, bạn không hiểu gì cả /fakepath, bạn sẽ lấy được tệp đã được tải lên:

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

Một số lệnh hữu ích khác là:

Để lấy tên của tệp:

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

Để lấy loại tệp:

Nếu tôi tải lên PNG, nó sẽ trả về image/png

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

Để lấy kích thước (tính bằng byte) của tệp:

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

Ngoài ra, bạn không phải sử dụng các lệnh này on('change', bạn có thể nhận các giá trị bất kỳ lúc nào, chẳng hạn như bạn có thể tải lên tệp và khi người dùng nhấp vào upload, bạn chỉ cần sử dụng các lệnh mà tôi đã liệt kê.

Question 4

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

Mã này sẽ không hiển thị C:\fakepath\trước tên tệp trong Google Chrome trong trường hợp sử dụng .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

Tôi đã sử dụng sau đây mà hoạt động chính xác.

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

Thêm nút đặt lại ẩn:

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

Nhấp vào nút đặt lại để xóa đầu vào.

$("#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>