jQuery-File-Upload - TypeError: $(…).fileupload is not a function Bootstrap FileInput问题

翻译于 2018-04-17 14:07:10 发布 · 5.1k 阅读

文章标签：

#Bootstrap FileInput #前端 #上传插件 #fileupload is not a function

前端专栏收录该内容

82 篇文章

订阅专栏

本文介绍了一种解决jQuery文件上传组件无法正常工作的问题方案。通过调整脚本加载顺序，确保jQuery库及其相关依赖项在使用前正确加载。该文详细展示了正确的HTML结构，并提供了必要的jQuery配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将引入的script 库和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>