使用没有 <form> 标签的 Jquery-fileupload 插件？答案

【问题标题】：Using Jquery-fileupload plugin without the <form> tag?使用没有 <form> 标签的 Jquery-fileupload 插件？
【发布时间】：2018-11-22 12:07:27
【问题描述】：

我正在尝试将Jquery File Upload plugin 集成到我的aspx 页面（asp.net 网站）中。我遵循了指南，包括所有必需的脚本和样式表，但在index.html 中，它使用form 标记来初始化插件，并且还指定了action 和method 属性。由于我使用的是 asp.net，因此不允许我插入 form 标签，因为 asp.net 用另一个 form 标签包裹整个网站，并且不允许在其中插入另一个 form 标签。

如何以不同的方式初始化插件？

【问题讨论】：

标签： asp.net forms jquery-file-upload

【解决方案1】：

您实际上不必有一个表单来使用 jQuery 文件上传插件。因为该插件在后台使用 jQuery ajax。在您的页面中使用下面的代码，请记住您必须在服务器端编写 API。

$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'your server api or handler';
    $('#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');
});

你的html如下：

<span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <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>

【讨论】：