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 回答