1

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

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

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

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

这真的把整个问题搞砸了。但无论如何我都会提交它，因为它已经将代码整合在一起并简化了许多用于文件上传和拖放的旧 SO 问题。另外，有人可能知道可能导致错误的原因。

问题：我应该在我的整个页面上寻找什么样的东西会导致被删除的 FileInfo 对象的内容受到保护？这是现在的问题。

这是小提琴

这是错误消息：

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>

这是带有 jQ​​uery 的 JS

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

0 回答 0