Question

<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br/>
<input id="fUpload" multiple type="file"/>
<ul id="ulList"></ul>
<input id="btnShow" type="button" value="Show"/><br/>
<script>
$(document).ready(function(){
$("#btnShow").on('click', function () {
    $("#ulList").empty();
    var fp = $("#fUpload");
    var lg = fp[0]
    .files.length; // get length
    var items = fp[0].files;
    var fragment = "";
    if (lg > 0) {
        for (var i = 0; i < lg; i++) {
            var fileName = items[i].name; // get file name
            var fileSize = items[i].size; // get file size 
            var fileType = items[i].type; // get file type
          // append li to UL tag to display File info
         fragment += "<li>" + fileName + " " + fileSize + " bytes. Type :" + fileType + "</li>";
        }
       $("#ulList").append(fragment);
    }
});
});
</script>
</body>
</html>

或请查看此网址

http://codepedia.info/editor-example/get-file-details-in-jquery-name-size-type-example/

这对于jquery中的文件上传工作正常，但我想在选择文件时获取文件名但是在单击选择文件按钮时我无法获取文件名。

任何解决方案???

Answer 1

您可以像这样收听输入文件的change事件：

$(document).ready(function() {    
  $("#fUpload").on("change", function(e) {
    $("#ulList").empty();
    var fp = $("#fUpload");
    var lg = fp[0]
      .files.length; // get length
    var items = fp[0].files;
    var fragment = "";
    if (lg > 0) {
      for (var i = 0; i < lg; i++) {
        var fileName = items[i].name; // get file name
        var fileSize = items[i].size; // get file size 
        var fileType = items[i].type; // get file type
        // append li to UL tag to display File info
        fragment += "<li>" + fileName + " " + fileSize + " bytes. Type :" + fileType + "</li>";
      }
      $("#ulList").append(fragment);
    }
  });


});

https://jsfiddle.net/Tintin37/tmv8rj42/

jquery文件上传在附加

1 个答案: