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>

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

1 个答案: