Html 5入力ファイルにドラッグ＆ドロップする

Question

これが可能かどうか分かりませんが、何も見つかりません。

私が欲しいのは、画像をドラッグ・ドロップするか、通常のhtmlファイル入力ボックスを使用するかのいずれかをユーザーに提供することです。

フォームが保存されるまで、アップロードする画像はありません。だから私はドラッグアンドドロップ領域は、フィールドを更新するだろうと思いますか？

どうすればいいですか？

ありがとうございます。

Answer 1

いいえできません。ドロップされたファイルは、AJAXを介してのみアップロードすることができます。

通常のHTML形式でファイルをアップロードする唯一の方法は、<input type="file">です。ファイル入力は読み取り専用です。

Answer 2

私はここで同じ答えを探しに来ました。あなたの必要性に合わせて見える次のことを終えました。

画像のドロップボックスでdivを作成し、div内に入力タイプ= "file"を追加します。必要に応じて高さと幅を設定します。不透明度を0に設定します。入力がdivを塗りつぶして表示されなくても機能します。

<Style> 
.divClass{ 
    position: relative; 
    // anything else 
} 
.inputClass{ 
    opacity: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    height: x // as desired 
    width: x // as desired 
} 
</style> 

以下

<div class="divClass"> 
    <input class="inputClass" name="inputName" type="file"> 
</div> 

スタイル===編集===

そこまで私のスタイリングを無視し、あなたは本当にただ入力タイプ=ファイルを使用して、フォームを使用する必要があります。必要に応じてスタイル/レイアウト。

Shazooが指摘したように、IEのドラッグアンドドロップは機能しません。 FirefoxとChromeで動作します。 OperaとSafariが不明です。セキュリティ上の理由から、入力タイプ=ファイルにJavaScriptを使用することはできません.Jasny氏が述べたように読み込み専用であるため、ブラウザのベンダーが許可しているものに頼らざるを得ません。

これを念頭において、IEユーザーにフィールドをクリックしてファイルを選択してアップロードするオプションを与えることができます。 IEのデフォルトの入力タイプ= "ファイル"はこの機能を提供します。入力を表示したままにしておくと、表示されます。 （デフォルトエッジ入力タイプ=ファイル）（https://stackoverflow.com/a/31757969/3136874に基づく）のIE例えば

フィルタ

function stopIeDefault(){ 
    window.addEventListener("dragover",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    },false); 
    window.addEventListener("drop",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    },false); 
} 
if (/MSIE 10/i.test(navigator.userAgent)) { 
    // This is internet explorer 10 
    stopIeDefault() 
} 

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) { 
    // This is internet explorer 9 or 11 
    stopIeDefault() 
} 

if (/Edge\/\d./i.test(navigator.userAgent)){ 
    // This is Microsoft Edge 
    stopIeDefault() 
} 

IEとエッジのためのこの試験。バージョンを検出した場合は、stopIeDefaultを使用してドラッグ＆ドロップのデフォルトを防止します。これは、フォーム上にドラッグアンドドロップするとIEが画像をロードするのを防ぎます。 （Edgeはこれを防ぐため、デフォルトではstopIeDefaultを呼び出す必要はありません）また、別のスタイルを適用したり、コードブロックやIEを処理しないものを追加することもできます。 w3schoolsによると、2016年8月現在のIEブラウザシェアは5.2-6.2％である：http://www.w3schools.com/browsers/default.asp、これはあなたが何をすべきかを決定するのに役立ちます。

ドラッグアンドドロップがサファリやオペラで動作するかどうかは誰でも確認できます。 ===編集===