Question

我正在尝试使用标准分段上传来上传单个文件。它应该像页面上有一个表单，文件字段和文本字段以及底部的提交按钮一样工作。他们识别文件，键入其他一些字符串，然后单击“上传”按钮。在这种情况下，虽然表单只是用于创建FileForm对象的虚拟对象。文本字段和文件字段以及下拉框只是随机DOM元素，后面有JS。（下面是HTML和jQuery / JavaScript。）

因此，关于非格式代码，它有效（意味着文件上传，我可以看到服务器上的字节）仅当用户使用<input type="file" .../>元素来识别时文件。

如果用户将文件拖放到页面上的某个位置，我会将文件信息保存在数据元素中，并从那里使用它而不是从文件输入字段中使用。但是当删除文件时，会出现错误（如下所示），因为不允许代码从drop返回的FileList中获取单个文件。

所以我把所有相关代码放在这里并设置了一个小提琴。但是，当我将它剥离到jsFiddle（下面链接）时，两种方法都有效。

这真的搞砸了整个问题。但我还是会提交它，因为它已将代码整合在一起，并简化了很多旧的SO问题，用于上传文件和拖放文件。下降。此外，有人可能知道可能导致错误的原因。

问题：我应该在整页上查找哪些内容会导致已删除的FileInfo对象的内容受到保护？这就是现在的问题。

这是FIDDLE

以下是错误消息：

Error: Permission denied to access property 'length'
    if (files.length > 1) {

这是HTML

<label for="dropbox">
    <span>DROP HERE:</span>
    <!-- CSS makes this a big purple bordered box -->
    <div id="dropbox">&nbsp;</div>
    <div id="dropfile"></div>
</label>
<label for="inputFile">
    <span>FILES:</span>
    <input type="file" id="inputFile" name="inputFile"/>
</label>

<input type="button" id="upload" value="Upload"/>

<form enctype="multipart/form-data" method="post" id="fileform"></form>

这是JS w / jQuery

$.event.props.push('dataTransfer');
$("#dropbox").on("drop", function(e) {
     e.stopPropagation();
     e.preventDefault();

     var dt = e.originalEvent.dataTransfer;
     var files = dt.files;
     // errors on these lines *******************************************
     if (files.length > 1) { alert(files.length + " files dropped. Only 1 allowed"); }
     var file = files[0];
     // errors on these lines *******************************************

     $("#dropfile").text(file.name);
     $("#dropbox").data("file", file);
     try {
         $("#inputFile").val(""); // works in some browsers
     } catch (e) {
         // ignore failure in some browsers
     }
});

$("#dropbox").on("dragenter", function(e) {
    e.stopPropagation();
    e.preventDefault();
});

$("#dropbox").on("dragover", function(e) {
    e.stopPropagation();
    e.preventDefault();
});

$("#inputFile").change(function(e) { // selecting a file, erases dropped one
    $("#dropfile").text("");
    $("#dropbox").removeData("file");
});

$("#upload").click(function() {
    var data = new FormData($("#fileform")[0]);
    var obj = readTextBoxes();
    for (var prop in obj) {
        data.append(prop, obj[prop]);
    }

    // HTML file input user's choice(s)...
    var dropfile = $("#dropbox").data("file");
    if (dropfile) {
        data.append("inputFile", dropfile);
    } else {
        $.each($("#inputFile")[0].files, function(i, file) {
            data.append("inputFile[" + i + "]", file);
        });
    }

    var parms = {
        url : baseUrl + "v2/document/upload",
        type : "POST",
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType     
        data : data,  
        timeout : 40000
    };
    var promise = $.ajax(parms);
    // ... handle response
});

HTML5 Drag＆amp; Drop File Upload获取JavaScript'权限被拒绝'访问FileInfo对象

0 个答案: