Jquery 使用 blueimp 插件的文件上传问题

Question

开发 laravel 网络应用程序，我正在尝试使用 blueimps 文件上传，可在此处获取：https://github.com/blueimp/jQuery-File-Upload 我遇到一个错误，我正在努力解决。

 jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).fileUpload is not a 
 function
    at HTMLDocument.<anonymous> (createappeal-step4:94)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

到目前为止，我已经尝试使用 jquery CDN，由 blueimp 提供的 Jquery。直接复制粘贴他的代码，确保我没有打错字。

<!--Js Here-->
<!--Jquery js-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!--Ajax Popper js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!--Bootstrap js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--Upload ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuq/xzmlsLoJpyjoggmTez8OWUFM0/RC5BsqQBDX2v5cMvDHcMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>-->
<script src="{{ asset("/assets/js/jquery.fileupload.js")}}" type="javascript/text"></script>
<script src="{{ asset("/js/vendor/jquery.ui.widget.js")}}" type="javascript/text"></script>
<script src="{{asset("/js/jquery.iframe-transport.js")}}" type="javascript/text"></script>
<script>
    $(document).ready(function() {
        $('#fileupload').fileUpload({
            datatype: 'json',
            done: function (e,data){
                $.each(data.result.files, function(index,file){
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function(e,data){
                var progress=parseInt(data.loaded / data.total * 100, 10);
                $('#progress.bar').css(
                    'width',
                    progress + '%'
                );
            }
        });
    });
</script>

Answer 1

我自己设法解决了这个问题。不确定为什么包含的 js 文件无法正常工作，但删除并重新输入可以使它们成功加载。此外，js 文件必须按特定顺序排列（见下文）

<script src="{{ asset ("/assets/js/vendor/jquery.ui.widget.js") }}"></script>
<script src="{{ asset ("/assets/js/jquery.iframe-transport.js") }}"></script>
<script src="{{ asset ("/assets/js/jquery.fileupload.js") }}"></script>

Jquery 使用 blueimp 插件的文件上传问题

Jquery fileupload problem using blueimp plugin

jquery

blueimp