web-dev-qa-db-ja.com

jQuery-File-Upload-TypeError：$（...）。fileuploadは関数ではありません

シンプルなページのJSPにhtml/jsコードがあります。

<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（{

私の問題について何か提案はありますか？

jqueryjquery-file-upload
4
Daniele Grillo

BlueImpがオンラインで公開しているデモサイトにアクセスして、これを自分で修正しました。このプロジェクトのGitHubリポジトリは、 https://github.com/blueimp/jQuery-File-Upload にあります。それらのソースコードを見ると、プロジェクトでこれを機能させるために2つのファイルが必要であることが明らかになります。 1. jquery.ui.widget.js および2. jquery.fileupload.js 。

これらのファイルをアプリに含めると、fileuploadのコードが機能します。 fileuploadファイルの依存関係としてUIウィジェットドキュメントが必要になります。

この実用的な例を探している場合、Herokuには、Herokuを使用しているかどうかに関係なく、ガイドとして役立つ適切な記述があります。 RailsでのS3画像のアップロードへの直接

ハッピーコーディング！

3
calicanadian

同じ問題が発生しました。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>
6
rom