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>

编辑：好的，所以我做了一些研究，显然这个错误发生是因为我没有初始化插件。所以我尝试通过执行$（＆＃39; #fileupload＆＃39;）来初始化它.fileupload（）;但它没有用。我试图将它放在不同的地方：在form_submit函数的开头，在render：

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();


},

但没有任何作用......它仍然不会在第一时间发射。

Answer 1

好的，所以我解决了我的问题：我只需将fileupload函数放在$（document）.ready（function（）中就像这样：

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

});


});

我有一个初始化Jquery文件上传插件的问题

1 个答案: