1

標準のマルチパート アップロードを使用して単一のファイルをアップロードしようとしています。ページにファイル フィールドとテキスト フィールドがあり、下部に [送信] ボタンがあるフォームがあるかのように動作するはずです。ファイルを特定し、他の文字列をいくつか入力して、[アップロード] ボタンをクリックします。この場合、フォームは FileForm オブジェクトを作成するために使用される単なるダミーです。そして、テキスト フィールドとファイル フィールドとドロップ ボックスは、背後に JS を持つランダムな DOM 要素です。(以下の 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>

これがjQueryを使用した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