サードパーティのプラグインを使用せずにこれは絶対に現実的であり、可能です。
次のスニペットはあなたにそれが仕事ができるかのアイデアを与える必要があります。
ドロップエリア
$(".drop-files-container").bind("drop", function(e) {
var files = e.originalEvent.dataTransfer.files;
processFileUpload(files);
// forward the file object to your ajax upload method
return false;
});
processFileUpload() - メソッド:
function processFileUpload(droppedFiles) {
// add your files to the regular upload form
var uploadFormData = new FormData($("#yourregularuploadformId")[0]);
if(droppedFiles.length > 0) { // checks if any files were dropped
for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files
}
}
// the final ajax call
$.ajax({
url : "upload.php", // use your target
type : "POST",
data : uploadFormData,
cache : false,
contentType : false,
processData : false,
success : function(ret) {
// callback function
}
});
}
書式例
このようなことを自由に使い始めることができます。あなたは、あなたが、プログレスバー、プレビュー、アニメーションのように希望する任意のエキストラを追加することができ、ここでもちろんhttp://caniuse.com/#feat=xhr2
を見つけることができます。こののブラウザのサポート...
'if(droppedFiles.length> 0 ){ for(f = 0; f
Tenatious
@Tenatious私はそこにいくつかのコメントを追加しました。しかし、通常のfor-loopは、ドロップされたファイルをフォームに追加します。 – wildhaber
ああ、私は参照してください。私はそれをアップロードすることができた。助けてくれてありがとう!:) – Tenatious