blueimp jquery文件上傳錯誤.fileupload不是函數

Question

我正在使用blueimp jquery文件上傳插件。但我有時會看到一個錯誤（不是每次刷新）我該如何解決這個問題？

Uncaught TypeError: $(...).fileupload is not a function at HTMLFormElement. (72:348) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest. (jquery.min.js:4) (anonymous) @ 72:348 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 A @ jquery.min.js:4 (anonymous) @ jquery.min.js:4

<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script> 
<script src="bower_components/blueimp-tmpl/js/tmpl.min.js"></script> 
<script src="bower_components/blueimp-load-image/js/load-image.all.min.js"></script> 
<script src="bower_components/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-ui.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-process.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-validate.js"></script> 
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-image.js"></script> 

<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
<div class="template-upload fade col-md-2 text-center"> 
    <div style="max-width:100%; max-height:75px; margin-top:10px"> 
     <span class="preview"></span> 
    </div> 

    <div> 
     <strong class="error text-danger"></strong> 
    </div> 

    <div> 
     <p class="size">Yükleniyor...</p> 
     <div class="progress progress-striped active" role="progressbar" 
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 
     <div class="progress-bar progress-bar-success" style="width:0%;"></div></div> 
    </div> 

    <div> 
     {% if (!i && !o.options.autoUpload) { %} 
      <button class="btn btn-primary start" disabled> 
       <i class="glyphicon glyphicon-upload"></i> 
       <span>Yükle</span> 
      </button> 
     {% } %} 
     {% if (!i) { %} 
      <button class="btn btn-warning cancel"> 
       <i class="glyphicon glyphicon-ban-circle"></i> 
       <span>İptal</span> 
      </button> 
     {% } %} 
    </div> 
</div> 
{% } %} 
</script> 
<!-- The template to display files available for download --> 
<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
<div class="template-download fade col-md-2 text-center" > 
    <div style="max-width:100px; max-height:100px; margin:0 auto; margin-top:10px"> 
     <span class="preview"> 
      {% if (file.thumbnailUrl) { %} 
       <a href="{%=file.url%}" title="{%=file.name%}" 
       download="{%=file.name%}" data-gallery> 
       <img src="{%=file.thumbnailUrl%}" style="max-width:100%; max-height:75px;"></a> 
      {% } %} 
     </span> 
    </div> 
    <div> 
     {% if (file.error) { %} 
      <div><span class="label label-danger">Error</span> {%=file.error%}</div> 
     {% } %} 
    </div> 
    <div> 
     <span class="size">{%=o.formatFileSize(file.size)%}</span> 
    </div> 
    <div class="mt10 text-center"> 
     {% if (file.deleteUrl) { %} 
      <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> 
       <i class="glyphicon glyphicon-trash"></i> 

      </button> 
     {% } else { %} 
      <button class="btn btn-warning cancel"> 
       <i class="glyphicon glyphicon-ban-circle"></i> 

      </button> 
     {% } %} 
    </div> 
</div> 
{% } %} 
</script> 

<script type="text/javascript"> 
    $(function() { 
     $('#fileupload').fileupload({ 
      url: 'my.php' 
     }); 
     $('#fileupload').fileupload(
      'option', 
      'redirect', 
      window.location.href.replace(
       /\/[^\/]*$/, 
       '/cors/result.html?%s' 
      ) 
     ); 
     $('#fileupload').addClass('fileupload-processing'); 
     $.ajax({ 
      url: $('#fileupload').fileupload('option', 'url'), 
      dataType: 'json', 
      context: $('#fileupload')[0] 
     }).always(function() { 
      $(this).removeClass('fileupload-processing'); 
     }).done(function (result) { 
      $(this).fileupload('option', 'done') 
       .call(this, $.Event('done'), {result: result}); 
     }); 
    }); 
</script> 

Answer 1

我固定的額外的jQuery代碼的用戶的問題。但錯誤仍然是一樣的。這是誰想要使用這個解決方案。

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    loadImages(data); 
}); 

function loadImages(data) { 
    $.getJSON('my.php', function (data) { 
     var result = tmpl('show-template', data); 
      $('#houseImagesDiv').html(result).fadeIn(); 
     }); 
} 

loadImages(); 

$(document).on('click','.delete',function(event){ 
    event.preventDefault(); 
    $.getJSON($(this).data('url')).done(function() { 
     loadImages(); 
    }); 
}); 

，我加入了形式

<div id="houseImagesDiv"></div> 

我做了空下載JS模板。

<script id="template-download" type="text/x-tmpl"> 
    // need empty row here 
</script> 

我爲新div創建了新模板。

<script id="show-template" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <div class="template-download col-md-2 text-center" > 
     <div> 
      <span class="preview"> 
       <img src="{%=file.thumbnailUrl%}"> 
      </span> 
     </div> 
     <div class="mt10 text-center"> 
      <button class="btn btn-danger delete" 
        data-type="{%=file.deleteType%}" 
        data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} 
        data-xhr-fields='{"withCredentials":true}'{% } %}> 
       <i class="glyphicon glyphicon-trash"></i> 
      </button> 
     </div> 
    </div> 
{% } %} 
</script>