Jquery File upload plugin 초기화 문제가 있습니다.

Question

이 플러그인을 백본 업로드에 사용하고 있지만, 업로드하기 전에 2 번 제출해야합니다. 처음으로 파일을 선택했을 때 fileupload 함수가 실행되지 않는 것처럼 보였습니다. 그런 다음 두 번째 시간을 선택하면 파일이 실행됩니다.

그것은 매우 바보처럼 보이지만 내가 틀렸다 어디하지 않습니다 .. 여기

는 백본 부분 :

form_submit: function(e){ 

    $('#fileupload').fileupload({ 
    add: function (e, data) { 


     // Automatically upload the file once it is added to the queue 
     var jqXHR = data.submit(); 
    }, 
    progress: function(e, data){ 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .progress-bar').css(
     'width', 
     progress + '%' 
     ); 
     if (progress == 100) { 
     var message = "<font color=green>Fichier uploadé !</font>"; 
     var info = document.getElementById("info"); 
     info.innerHTML=message; 
     } 
    } 
    }); 
} 

여기에 도움이 할 수있는 경우에 제의 HTML 부분 :

<form enctype="multipart/form-data" id="maj-container"> 
    <script type="text/template" id="maj-template"> 
     <div class="file-input-wrapper" id="file-group"> 
    <button class="btn-file-input" id="btn-file">Choisir un fichier</button> 
    <input type="file" name="files[]" id="fileupload" multiple /> 
     </div> 
     <br> 
     <br> 
     <div id="progress" class="progress"> 
    <div class="progress-bar progress-bar-success"></div> 
     </div> 
     <div id="info" style="margin-top:30px"></div> 
    </script> 
    </form> 

편집 : 그래, 몇 가지 조사를했는데이 오류는 내가 플러그인을 초기화하지 않았기 때문에 발생합니다. 그래서 $ ('# fileupload')를 실행하여 초기화하려고했습니다. fileupload(); 그러나 그것은 작동하지 않습니다.

render: function(){ 
    var template = _.template(this.template.html()); 
    this.$el.html(template({ m : this.model.toJSON()})); 
    $('#fileupload').fileupload({ 
    url: '/rest/maj/', 
    sequentialUploads: true 
    }); 
    return this; 
}, 

나는 초기화도 시도 :

initialize : function(options) { 

     $('#fileupload').fileupload({ 
    url: '/rest/maj/', 
    sequentialUploads: true 
    }); 
    this.router = options.router; 
    this.render(); 


}, 

그러나 아무것도 작동하지 않습니다 .. 그것은 여전히 ​​렌더링에서 form_submit 함수의 시작 부분에 : 나는 differents의 장소에 배치하려고 처음에는 발사되지 않습니다. 좋아

Answer 1

그래서 나는 내 문제를 해결 :

$(document).ready(function() { 
var router = new AppRouter(); 
Backbone.history.start(); 

$('#fileupload').fileupload({ 
    url: '/rest/maj/', 
    //acceptFileTypes: /(\.|\/)(tar|tgz|tar.gz)$/i, 
    //maxFileSize: 20000000, // 20 MB 

    add: function (e, data) { 
     var acceptFileTypes = /^application\/(tar|tgz|tar.gz|gzip|x-tar)$/i; 
     alert(data.files[0]['type']); // Pour vérifier la syntaxe de l'extension 
     //alert(data.files[0]['size']); Pour vérifier la taille du fichier 
     if(data.files[0]['type'].length && !acceptFileTypes.test(data.files[0]['type'])) { //si le type ne correspond pas à ceux définits dans acceptFileTypes 
     $('#info').append('<font color=red><b>Mauvaise extension</b></font><br/><br/>Extensions valides : <b>(tar|tgz|tar.gz)</b>'); 

     } 
     else if(data.files[0]['size'] > 20000000) { //si la taille du fichier dépasse 20 MB 
     $('#info').append('<font color=red><b>La taille du fichier doit etre inférieure à 20 MO</b></font>'); 

     } 
     else { 

     var jqXHR = data.submit(); //upload le fichier direct après qu'on l'ai choisi 
     } 
    }, 
    progress: function(e, data){ 
     var progress = parseInt(data.loaded/data.total * 100, 10); // calcule l'avancement de l'upload et l'affiche dans la bar progress 
     $('#progress .progress-bar').css(
     'width', 
     progress + '%' 
     ); 
     if (progress == 100) { 
     $('#info').append('<font color=green><b>Fichier uploadé !</b></font>'); 
     } 
    } 

}); 


});