jQuery-File-Upload

Question

我的 html/js 代码在我的简单页面 JSP:

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
<body>

<form id="MyID" method="post" action="JSFPAGE" enctype="multipart/form-data">

<span class="btn btn-success fileinput-button">
   <i class="glyphicon glyphicon-plus"></i>
      <span>Select files...</span>
      <input id="fileupload" type="file" name="files[]" multiple>
</span><br><br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success">
    </div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files">
</div>

<script type="text/javascript">
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'xUpload.xsp';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</form>
</body>

这个很简单。。。所有的JS资源都OK。但是在控制台中我看到了这个错误：

TypeError: $(...).fileupload 不是函数 $('#fileupload').fileupload({

你对我的问题有什么建议吗？

Answer 1

我遇到了同样的问题，我只是在关闭 body 标签之前移动了 js 文件，它起作用了：

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<body>

<form id="MyID" method="post" action="JSFPAGE" enctype="multipart/form-data">

<span class="btn btn-success fileinput-button">
   <i class="glyphicon glyphicon-plus"></i>
      <span>Select files...</span>
      <input id="fileupload" type="file" name="files[]" multiple>
</span><br><br>

...

<script type="text/javascript">
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'xUpload.xsp';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
       ...
});
</script>

</form>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
</body>

Answer 2

我通过访问 BlueImp 的在线演示站点自行解决了这个问题。可以在 https://github.com/blueimp/jQuery-File-Upload. If you look at their source code, it becomes apparent that you need two files to help this work on your project. 1. jquery.ui.widget.js and 2. jquery.fileupload.js.

找到该项目的 GitHub 存储库

如果您将这些文件包含在您的应用程序中，文件上传代码将起作用。您需要 UI 小部件文档作为 fileupload 文件的依赖项。

如果您正在寻找这方面的工作示例，Heroku 有一篇不错的文章可以帮助您指导您，无论您是否使用 Heroku。 Direct to S3 Image Uploads in Rails

编码愉快！

jQuery-File-Upload - TypeError: $(...).fileupload is not a function

jQuery-File-Upload - TypeError: $(...).fileupload is not a function

jquery