我有一個初始化Jquery文件上傳插件的問題

我使用這個插件來上傳我的主幹，但是，我必須在上傳之前提交2次。當我第一次選擇我的文件時，它看起來像fileupload函數沒有執行，然後當我第二次選擇它時，它將執行。我有一個初始化Jquery文件上傳插件的問題

這似乎是很愚蠢的，但我不明白哪裏我錯了..

這裏的主幹部分：

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（）來初始化它。但它不起作用。我試圖把它放在型動物的地方：在form_submit函數的開始，在渲染：

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：

initialize : function(options) { 

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


},

但沒有任何工程..它依然不會在第一時間開火。

來源

2014-05-21 hy0shi

請發表您的解決方案如下答案，將其標記儘快「接受」，不要在問題中發佈解決方案，謝謝。 – Sparky

好了，所以我解決我的問題：我只是把文件上傳功能在$（文件）。就緒（函數（）這樣的：

$(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>'); 
     } 
    } 

}); 


});

來源

2014-05-23 08:53:48 hy0shi

我有一個初始化Jquery文件上傳插件的問題

回答

相關問題