JavaScript功能不发射Onchange事件

Question

给定此html sbippet

 <div id="imageSelection" class="form-group">
      @Html.LabelFor(m => m.PostedFiles,"Select images/videos" ,new {id="fileSelect",@for="fileElem", @class="form-control btn btn-sm btn-success", style="width:144px;" })
      @Html.TextBoxFor(m => m.PostedFiles, new
      {
       type = "file",
       id = "fileElem",
       @class = "col-md-10 form-control",
       style="display:none;",
       multiple = "multiple",
       accept = "image/*", 
       onchange = "handleFiles(this.files)"
     })                  
</div>

可以正常工作，您单击按钮，打开文件选择器，选择一些文件，然后单击按钮关闭文件选择器。Onchange事件没有启动(Onchange是此处建议的事件(

它在页面中生成此HTML

<div id="imageSelection" class="form-group">
     <label class="form-control btn btn-sm btn-success" for="fileElem" id="fileSelect" style="width:144px;">Select images/videos</label>
     <input accept="image/*" class="col-md-10 form-control" id="fileElem" multiple="multiple" name="PostedFiles" onchange="handleFiles(this.files)" style="display:none;" type="file" value="" />
</div>

这是脚本

 <script>
$(document)
    .ready(function () {
        //element variables for the thumbnail display
        var dropbox = $("#dropbox"),
            filePropertyDisplay = $("#loadingImageFileProperties"),
            fileName = $("#dd_filename"),
            fileSize = $("#dd_filesize"),
            fileType = $("#dd_filetype"),
            gallery = $("#imageGallery"),
            uploading = $("#imageUploading"),
            fileSelect = document.getElementById("fileSelect"), //$("#fileSelect"),
            fileElem = document.getElementById("fileElem"), //$("#fileElem"),
            messages = $("#messageArea");
        gallery.hide();
        uploading.hide();
        //add event listeners to handle events
        dropbox.on("dragenter", function(e) {
            e.stopPropagation();
            e.preventDefault();
        });
        dropbox.on("dragover", function (e) {
            e.stopPropagation();
            e.preventDefault();
        });
        dropbox.on("drop", function (e) {
            e.stopPropagation();
            e.preventDefault();
            var dt = e.originalEvent.dataTransfer;
            var files = dt.files;
            handleFiles(files);
        });
        fileSelect.addEventListener("click", function (e) {
            if (fileElem) {
                fileElem.click();
            }
            e.preventDefault(); // prevent navigation to "#"
        }, false);
        //fileSelect.on("click", function (e) {
        //    if (fileElem) {
        //        fileElem.click();
        //    }
        //    // prevent navigation to "#"
        //    e.preventDefault(); 
        //});
        function handleFiles(files) {
            alert(files.length);
        }
    });
</script>

我最初试图坚持使用jQuery，但也无法与.on((一起使用，所以我恢复了javascript，但这也不起作用。

Drop功能有效，并调用HandleFiles，但FileElem OnChange方法不会触发。

Answer 1

编辑：

对不起，这让我意识到问题是在阅读您选择的文件，而不仅仅是让代码工作。

我刚刚添加了：

var files = $(this)[0].files;

要获取所选用户的文件集合(可能是一个或多个(;

，然后：

    for (var i = 0; i < files.length; i++) {
        alert(files[i].name);
    }

循环浏览所选的所有文件，然后获取其名称。如果需要，也可以阅读.size。

---

这将采用适当的方法来处理您要实现的目标。

$(document)
    .ready(function () {
        //element variables for the thumbnail display
        var dropbox = $("#dropbox"),
            filePropertyDisplay = $("#loadingImageFileProperties"),
            fileName = $("#dd_filename"),
            fileSize = $("#dd_filesize"),
            fileType = $("#dd_filetype"),
            gallery = $("#imageGallery"),
            uploading = $("#imageUploading"),
            fileSelect = document.getElementById("fileSelect"), //$("#fileSelect"),
            fileElem = document.getElementById("fileElem"), //$("#fileElem"),
            messages = $("#messageArea");
        gallery.hide();
        uploading.hide();
        //add event listeners to handle events
        dropbox.on("dragenter", function(e) {
            e.stopPropagation();
            e.preventDefault();
        });
        dropbox.on("dragover", function (e) {
            e.stopPropagation();
            e.preventDefault();
        });
        dropbox.on("drop", function (e) {
            e.stopPropagation();
            e.preventDefault();
            var dt = e.originalEvent.dataTransfer;
            var files = dt.files;
            handleFiles(files);
        });
        fileSelect.addEventListener("click", function (e) {
            if (fileElem) {
                fileElem.click();
            }
            e.preventDefault(); // prevent navigation to "#"
        }, false);
        
        $('#fileElem').on('change',function(e){
            var files = $(this)[0].files;
            for (var i = 0; i < files.length; i++) {
                alert(files[i].name);
                //alert(files[i].size);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageSelection" class="form-group">
      
      <label for="fileElem" class="form-control btn btn-sm btn-success", style="width:144px;"  id="fileSelect">Select images/videos</label>
      <input type="file" id = "fileElem" class = "col-md-10 form-control"
       style="display:none;"
       multiple = "multiple"
       accept = "image/*"
</div>