2

struts フレームワークで Web アプリケーションの複数のファイル アップロードに blueimp jQuery プラグインを使用していますが、ファイル アップロード ハンドラが jQuery によって初期化されないという問題があります。関数ではない $('#fileupload').fileupload を取得しています。どこが間違っているのかを理解するのを手伝ってくれる人はいますか。

`<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/jquery.fileupload-ui.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.fileupload-ui-noscript.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.postmessage-transport.js"></script>
<script src="js/jquery.ui.widget.js"></script> 
<script src="js/jquery.fileupload.js"></script>
</head>
<style type="text/css">
.bar {
    height: 18px;
    background: green;
}
</style>
<head>
<body>
<form id="fileupload" action="testAction.do?operation=uploadImages" method="POST" enctype="multipart/form-data">
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
    <div class="row fileupload-buttonbar">
        <div class="span7">
            <span class="btn btn-success fileinput-button">
                <i class="icon-plus icon-white"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
            <span class="fileupload-loading"></span>
        </div>
        <div class="span5 fileupload-progress fade">
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="bar" style="width:0%;"></div>
            </div>
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
<br>

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

<script>
jQuery(function () {
    jQuery('#fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});
});
</script> 
</body> 
</html>`
4

2 に答える 2

9

すべてのスクリプト ファイルを正しい順序でロードしていることを確認する必要があります。

jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js

body タグを閉じる直前。

また、ブラウザー インスペクターを使用して、スクリプトが実際に読み込まれていることを確認します。

于 2013-09-16T09:25:36.827 に答える
1

最初にjquery uiを含めてからjqueryファイルをアップロードする必要があると思います

<script src="js/jquery-ui-1.10.4.js"></script>
<script src="js/jquery.fileupload.js"></script>

上記のように私のエラーを修正する

于 2015-04-17T10:07:59.483 に答える