DropZone(ファイルアップロードプラグイン)

　　
3.jsファイル
アップロードするにはjsを構成する必要があります.jqueryが導入されていない場合:

var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"}); 

2.jqueryが導入された場合:

$("#dropz").dropzone({url: "/upload"})

一般的な構成アイテム:

url:必要なパラメータ、ファイルのアップロードアドレス;

maxFiles:デフォルトはnullで、最大ファイル数を制限する数値として指定できます.

maxFilesize:ファイルのサイズを制限し、単位はMBです.

acceptedFiles:アップロードを許可するファイルタイプ、ファイル拡張子はカンマで区切られ、フォーマットはインスタンスを参照してください.

autoProcessQueue:デフォルトはtrueです.つまり、ファイルをドラッグするとすぐに自動的にアップロードされます.アップロードする前にいくつかの選択した操作が必要で、手動でアップロードする必要がある場合は、この属性をfalseに設定し、手動でボタンをクリックしてアップロードすることができます.

paramName:要素に相当するname属性で、デフォルトはfileです.

ヒントテキスト:

dictDefaultMessage:ファイルが追加されたときのプロンプトテキストがありません.

dictFallback Message:Fallbackの場合のプロンプトテキスト.

dictInvalidInputType:ファイルタイプが拒否されたときのプロンプトテキスト.

dictFileTooBig:ファイルサイズが大きすぎる場合のヒントテキスト.

dictCancelUpload:リンクされたテキストのアップロードをキャンセルします.

dictCancelUploadConfirmation:確認情報のアップロードをキャンセルします.

dictRemoveFile:ファイルリンクのテキストを削除します.

dictMaxFilesExceeded:最大ファイル数を超えるプロンプトテキスト.

リスニングイベントを追加するには、次の手順に従います.

$("#dropz").dropzone({
    init: function() {
        this.on("addedfile", function(file) {
            // actions...
        });
    }
});

　　
jqueryが追加されていない場合:

dropz.on("addedfile", function(file) {
    // actions...
});

共通イベント:

addedfile:ファイルの追加は

発生です.

removefile:手動でサーバからファイルを削除すると

が発生します.

success:アップロードに成功すると

が発生します.

complete:ファイルのアップロードに成功または失敗した後に発生します.

canceled:ファイルがアップロード中にキャンセルされたときに発生します.

maxfilesreached:ファイル数が最大に達したときに発生します.

maxfilesexceeded:ファイル数が制限を超えると発生します.

totaluploadprogress:ファイルアップロード中の戻り値、最初のパラメータは総アップロード進捗(0から100)、2番目は総アップロードバイト数、3番目は総アップロードバイト数で、これらのパラメータを利用して、アップロード速度、残りのアップロード時間を計算することができます.

htmlファイルdemo

    



       （              ）
        

            

                

                    
                

                

                    
            
                    
     2   
                
            

        






    $(document).ready(function () {
         Dropzone.options.filedropzone = {
          url:"{{ request.path }}",
          paramName: "file", // The name that will be used to transfer the file
          maxFilesize: 1, // MB,
          addRemoveLinks:true,
          maxFiles:5,
          uploadMultiple:true,
          accept: function(file, done) {
            if (! file.name.endsWith(".zip") ) {
              alert("    .zip      ")
                done("     ")
                myDropzone.removeFile(file);
            }
            else { done(); }
          }
        };


      Dropzone.autoDiscover = false;
      myDropzone = new Dropzone("#filedropzone");
      myDropzone.on("addedfile", function(file) {
        /* Maybe display some more file information on your page */
      });

      myDropzone.on("success", function(file,response) {
          /* Maybe display some more file information on your page */
          console.log('filex upload done...', response);
      } )

    })

　　
完全な例:

$("#dropz").dropzone({            
    url: "/files/uploading",
    maxFiles: 1,
    maxFilesize: 1024,
    acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
    autoProcessQueue: false,
    paramName: "file",
    dictDefaultMessage: "         ",
    init: function () {
        var myDropzone = this, submitButton = document.querySelector("#qr"), 
        cancelButton = document.querySelector("#cancel");
        myDropzone.on('addedfile', function (file) {
            //         ，       ，         
        });
        myDropzone.on('sending', function (data, xhr, formData) {
            //           
            formData.append('watermark', jQuery('#info').val());
        });
        myDropzone.on('success', function (files, response) {
            //           
        });
        myDropzone.on('error', function (files, response) {
            //          
        });
        myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
            //progress      
            $("#pro").text("    ：" + parseInt(progress) + "%");
            //           
            var mm = 0;
            var byte = 0;
            var tt = setInterval(function () {
                mm++;
                var byte2 = bytes;
                var remain;
                var speed;
                var byteKb = byte/1024;
                var bytesKb = bytes/1024;
                var byteMb = byte/1024/1024;
                var bytesMb = bytes/1024/1024;
                if(byteKb <= 1024){
                    speed = (parseFloat(byte2 - byte)/(1024)/mm).toFixed(2) + " KB/s";
                    remain = (byteKb - bytesKb)/parseFloat(speed);
                }else{
                    speed = (parseFloat(byte2 - byte)/(1024*1024)/mm).toFixed(2) + " MB/s";
                    remain = (byteMb - bytesMb)/parseFloat(speed);
                }
                $("#dropz #speed").text("    ：" + speed);
                $("#dropz #time").text("    "+arrive_timer_format(parseInt(remain)));
                if(bytes >= byte){
                    clearInterval(tt);
                    if(byteKb <= 1024){
                        $("#dropz #speed").text("    ：0 KB/s");
                    }else{
                        $("#dropz #speed").text("    ：0 MB/s");
                    }
                    $("#dropz #time").text("    ：0:00:00");
                }
            },1000);
        });
        submitButton.addEventListener('click', function () {
            //      
            myDropzone.processQueue();
        });
        cancelButton.addEventListener('click', function () {
            //    
            myDropzone.removeAllFiles();
        });
    }
});
//        ：
function arrive_timer_format(s) {
    var t;
    if(s > -1){
        var hour = Math.floor(s/3600);
        var min = Math.floor(s/60) % 60;
        var sec = s % 60;
        var day = parseInt(hour / 24);
        if (day > 0) {
            hour = hour - 24 * day;
            t = day + "day " + hour + ":";
        }
        else t = hour + ":";
        if(min < 10){t += "0";}
        t += min + ":";
        if(sec < 10){t += "0";}
        t += sec;
    }
    return t;
}

　

#urls.py

from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^test/', views.dropzoneTest),
]





#views.py

from django.shortcuts import render

def dropzoneTest(request):
    if request.is_ajax():
        file = request.FILES.get('file')
        with open('file.jpg','wb') as f:
            for line in file:
                f.write(line)
    return render(request,'dropzoneTest.html')


#dropzoneDemo.html




    
    
    {% load static %}
    
    
    


           
        

{% csrf_token %}
の をここに きずってください.
2 の をアップロードできます

$(document).ready(function () {
$("#filedropzone").dropzone({
url: "{{ request.path }}",
maxFiles: 5,
maxFilesize: 1024,
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage:「アップロードするファイルをドラッグ」,
init: function () {
var myDropzone = this, submitButton = document.querySelector("#qr"),
cancelButton = document.querySelector("#cancel");
myDropzone.on('addedfile', function (file) {
//アップロードファイルを する で、 び をポップアップし、アップロードファイルの
});
myDropzone.on('sending', function (data, xhr, formData) {
//このファイルのパラメータをバックグラウンドに
formData.append('watermark', jQuery('#info').val());
});
myDropzone.on('success', function (files, response) {
//ファイルアップロード の
});
myDropzone.on('error', function (files, response) {
//ファイルアップロード の
});
myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
//progressは
$("#pro").text(「アップロード :」+parseInt(progress)+「%」);
//アップロード と り の
var mm = 0;
var byte = 0;
var tt = setInterval(function () {
mm++;
var byte2 = bytes;
var remain;
var speed;
var byteKb = byte/1024;
var bytesKb = bytes/1024;
var byteMb = byte/1024/1024;
var bytesMb = bytes/1024/1024;
if (byteKb <= 1024) {
speed = (parseFloat(byte2 - byte)/(1024)/mm).toFixed(2) + "KB/s";
remain = (byteKb - bytesKb)/parseFloat(speed);
} else {
speed = (parseFloat(byte2 - byte)/(1024 * 1024)/mm).toFixed(2) + "MB/s";
remain = (byteMb - bytesMb)/parseFloat(speed);
}
$("#dropz #speed").text("アップロードレート:"+speed);
$("#dropz #time").text(「 り 」+arrive_timer_format(parseInt(remain))13;
if (bytes >= byte) {
clearInterval(tt);
if (byteKb <= 1024) {
$("#dropz #speed").text("アップロードレート:0 KB/s");・13;
} else {
$("#dropz #speed").text("アップロードレート:0 MB/s");・13;
}
$("#dropz #time").text(" り :0:00:00");・13;
}
}, 1000);
});
submitButton.addEventListener('click', function () {
//アップロードファイルをクリック
myDropzone.processQueue();
});
cancelButton.addEventListener('click', function () {
//アップロードキャンセル
myDropzone.removeAllFiles();
});
}
});
// り フォーマット :
function arrive_timer_format(s) {
var t;
if (s > -1) {
var hour = Math.floor(s/3600);
var min = Math.floor(s/60) % 60;
var sec = s % 60;
var day = parseInt(hour/24);
if (day > 0) {
hour = hour - 24 * day;
t = day + "day "+ hour + ":";
}
else t = hour + ":";
if (min < 10) {
t += "0";
}
t += min + ":";
if (sec < 10) {
t += "0";
}
t += sec;
}
return t;
}
})