Question

给出这个html片段

 <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是示例here建议的事件）

它在页面中生成这个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。

这将是处理你想要实现的目标的正确方法。

＆＃13;

$(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);
            }
        });
    });

＆＃13;

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

＆＃13;

javascript函数没有触发onchange事件

1 个答案: