JSで$（this）[0] .filesをシミュレートする方法はありますか？

Question

私は画像をアップロードするためのドラッグアンドドロップコンテナを持っています。 stackoverflowがエディタに持つオプションのようなもの。ご存知のように、それは、2つの方法で動作します：

1. ドラッグ＆容器上に画像
2. クリックをドロップすると、ウィンドウが画像

を選択するように開かれ、その後今私は正確によそのようなことをやって：

// click 
$('.upload_image').on('change', function() { 
    file = $(this)[0].files; 
    frm = $(this).closest('form'); 
    addImageToInput(); 
    return false; 
}); 

// drag and drop 
$(".container").on('drop dragdrop', function (e) { 
    file = e.originalEvent.dataTransfer.files; 
    frm = $(this).closest('form'); 
    addImageToInput(); 
    return false; 
}); 

また、私はプレビューを作るための1つの以上の機能を持っている：

function addImageToInput() { 
    if (file !== "" || frm !== "") { 
     let uploadFormData = new FormData(frm[0]); 
     uploadFormData.append("imageToUpload", file[0]); 
     readURL(frm.find(".upload_image")[0]); 
     formData = uploadFormData; 
    } else { 
     alert('something went wrong'); 
    } 
} 

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('.modal-dropzone-img').html("<img src='" + e.target.result + "' class='upload_image_preview_img'/>"); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

私は（ブラウズ）画像、およびプレビュー一部が単語（でも、エラーがスローません）私はドラッグを使用していない時に「クリック」を使用して画像を添付する場合とにかく、プレビュー部分がうまく機能し、ドロップアプローチ。

file = $(this)[0].files;     // click approach 
file = e.originalEvent.dataTransfer.files; // drag and drop approach 

任意のアイデアはどのように私はそれらを等しくすることができます。

---

は、いくつかのテストの後、私はこれらが等しくない、考え出しましたか？ （最初のものが動作一つであるので、他の言葉では、私は、最初のもののような第二のいずれかを行う必要があり）

Answer 1

Iはファイルのみを受け入れるようにreadURL方法少し変更した、それはドラッグすることができドロップしたりアップロードしたりできます。またaddImageToInput()がドラッグを使用して、この条件をドロップすると、ここで

function addImageToInput() { 
    if (file !== "" || frm !== "") { 
     let uploadFormData = new FormData(frm[0]); 
     uploadFormData.append("imageToUpload", file[0]); 
     readURL(file[0]); 
     formData = uploadFormData; 
    } else { 
     alert('something went wrong'); 
    } 
} 

function readURL(input) { 

    if (input) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('.modal-dropzone-img').html("<img src='" + e.target.result + "' class='upload_image_preview_img'/>"); 
     } 
     reader.readAsDataURL(input); 
    } 
} 

が作業フィドルが

https://jsfiddle.net/153dp05q/