如何通过拖放上传文件时创建进度条

Question

对于文件上传，我有一个适用于表单的进度条。 这是我的表格：

 <form class="sfmform" action="" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <br />
        <input type="submit" class="Button Primary" name="upload" value="Upload" />

    </form>

这是生成进度条的js：

 /* progression upload status in %*/

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('.sfmform').ajaxForm({
beforeSend: function() {
    status.empty();
    var percentVal = '0%';
    bar.width(percentVal)
    percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal)
    percent.html(percentVal);
},
success: function(data) {

    var percentVal = '100%';
    bar.width(percentVal)
    percent.html(percentVal);
    status.html(data);
},
complete: function(data) {

    var percentVal = '0%';
    bar.width(percentVal)
    percent.html(percentVal);
    status.html(data);
},


});

现在我也使用拖放div来上传文件。这是拖放的div：

<div class="sfmform" id="drop-area"><h3 class="drop-text">Drag and Drop Files Here</h3></div>

如何通过拖放上传文件时调用相同的进度条？