dropzoneファイルの読み方

Question

どのようにdropzoneからファイルを読み込むことができますか、私はdropzoneにファイルをドラッグアンドドロップすることができますが、私はdropzoneにドロップされたファイルを読み込む方法を取得していません。私はstruts 1.1を使用しているアクションクラスにファイルをドロップしました。これで私を助けてくれますか？

ここでは、私が使用したdropzoneのコードスニペットがあります。dropzone内にajax呼び出しを作成しました。これはアクションクラスにファイル名を渡しますが、代わりに文字列値のみを取得します。ドロップゾーン

$(function() {  
    var myDropzone = new Dropzone("#my-dropzone"); 
    myDropzone.on("addedfile", function(file) { 

     $.ajax({ type: "POST", async: false, url: "/x/abc.do", data: { filename: file } }) 
          .done(function(msg) { console.log(" Uplaod -> " + msg); }); 
    }); 
}); 

と私はファイル名のみを与え、しかし、私のファイルのファイルサイズとリストを必要としている線の上

以下

String file = request.getParameter("filename"); 

のようなアクションクラスにファイル名を読んでいる内に落下していますドロップボックスにドロップ

注：私はstrutsを使用しており、dropzoneにenctypeを使用する方法を説明しています。

これで私を助けてください。

Answer 1

これを実現するには、dropzoneイベントを使用できます。

Dropzone.autoDiscover = false; // Disabling autoDiscover, otherwise Dropzone will try to attach twice. 

$(function() {  
    var myDropzone = new Dropzone("#my-dropzone"); 
    myDropzone.on("addedfile", function(file) { 
     /* Maybe display some more file information on your page */ 
    }); 
}); 

Answer 2

ファイルが大きすぎない場合は、FileReaderを使用できます。回答はreact-dropzone github pageに表示されます。

$(function() {  
    var myDropzone = new Dropzone("#my-dropzone"); 
    myDropzone.on("addedfile", function(file) { 

const reader = new FileReader(); 
     reader.onload =() => { 
      const fileAsBinaryString = reader.result; 
      // do whatever you want with the file content 
     }; 
     reader.onabort =() => console.log('file reading was aborted'); 
     reader.onerror =() => console.log('file reading has failed'); 

     reader.readAsBinaryString(file); 

     $.ajax({ type: "POST", async: false, url: "/x/abc.do", data: { filename: file } }) 
          .done(function(msg) { console.log(" Uplaod -> " + msg); }); 
    }); 
}); 

readAsBinaryString以外の機能を使用することもできます。例えば、readAsText(file, 'UTF-8')。それらのすべてはMDN Websiteにリストされています。