Question

这是我的代码：

        // first case
        $('.drop-files-container').on('drop dragdrop',function(e) {
            var files = e.originalEvent.dataTransfer.files;
            processFileUpload(files);
            return false;
        });

        // second case
        $('#files').on('change',function(e) {
            var files = e.originalEvent.dataTransfer.files;
            processFileUpload(files);
            return false;
        });

        function processFileUpload(droppedFiles) {
            alert('send ajax call');
        }

        $('.drop-files-container').on('dragenter',function(event){
            event.preventDefault();
            $(this).css('background','#f1f1f1');
        })
        $('.drop-files-container').on('dragover',function(event){
            event.preventDefault();
        })

        html, body{
            height: 100%;
        }
        .drop-files-container{
            display: block;
            border: 2px dashed #aaa;
            width: 550px;
            padding: 60px 0px;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 60px;
            line-height: 2;
            color: #999;
            text-align: center;
            cursor: pointer;
        }
        .drop-files-container:hover{
            background-color: #f1f1f1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="yourregularuploadformId" action="#">
        <div>
            <label for="files" class="drop-files-container">Drag .txt File Here</label>
            <input id="files" type="file" name="files[]" style="visibility:hidden;" multiple="multiple">
        </div>
    </form>

我需要在两种情况下执行processFileUpload(droppedFiles)功能。在.drop-files-container区域拖动文件或选择文件时“选择文件窗口”（当您点击该区域时，提到的窗口将打开）。

如您所见，我的代码也适用于第一种情况（拖放），但它不适用于第二种情况（选择文件窗口）。它抛出了这个错误：

“未捕获的TypeError：无法读取未定义的属性'文件'”

我该如何解决？

Answer 1

你可以试试这个，

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

为你的第二个街区。

您也可以使用

var files = evt.target.files;

或

var files = document.getElementById('files').files;

参考这些链接，

        // first case
        $('.drop-files-container').on('drop dragdrop',function(e) {
            var files = e.originalEvent.dataTransfer.files;
            processFileUpload(files);
            return false;
        });

        // second case
        $('#files').on('change',function(e) {
            var files = $(this)[0].files;
            processFileUpload(files);
            return false;
        });

        function processFileUpload(droppedFiles) {
            alert('send ajax call');
        }

        $('.drop-files-container').on('dragenter',function(event){
            event.preventDefault();
            $(this).css('background','#f1f1f1');
        })
        $('.drop-files-container').on('dragover',function(event){
            event.preventDefault();
        })

        html, body{
            height: 100%;
        }
        .drop-files-container{
            display: block;
            border: 2px dashed #aaa;
            width: 550px;
            padding: 60px 0px;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 60px;
            line-height: 2;
            color: #999;
            text-align: center;
            cursor: pointer;
        }
        .drop-files-container:hover{
            background-color: #f1f1f1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="yourregularuploadformId" action="#">
        <div>
            <label for="files" class="drop-files-container">Drag .txt File Here</label>
            <input id="files" type="file" name="files[]" style="visibility:hidden;" multiple="multiple">
        </div>
    </form>

拖拽自动删除文件上传

1 个答案: