【问题标题】:Can I upload a file to server using bootstrap-fileinput? Does it support server upload like jquery multiple file uploader?我可以使用 bootstrap-fileinput 将文件上传到服务器吗?它是否支持像 jquery 多文件上传器一样的服务器上传?
【发布时间】:2014-11-30 13:27:44
【问题描述】:

我正在尝试使用 bootstrap-fileinput 将文件上传到 C# 中的服务器 .它是否支持像jQuery File Upload这样的服务器端数据上传。在 jQuery File Upload 中,您可以使用处理程序在服务器端处理文件。我们可以使用引导文件输入来做到这一点吗?由于某种原因,我无法使用多个文件上传器..在此先感谢

【问题讨论】:

  • bootstrap 是客户端的 javascript 和 css 框架,它与服务器端没有任何关系。对于上传,您需要确保您的脚本在什么平台上运行,例如 php、python
  • 我使用 C# 作为服务器平台

标签: javascript c# jquery twitter-bootstrap file-upload


【解决方案1】:

在 HTML 中,您必须将其放在 Form 中,然后添加一个触发 ajax 的按钮,将其称为表单末尾的保存按钮

<form id="LogoForm" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md-12">
            <div id="upload" class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail" style="max-width: 200px; max-height: 150px;">
                    <img"http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image")"/>
                </div>
                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
                </div>
                <div class="form-group">
                    <span id="btnspan" class="btn default btn-file">
                        <span id="SelectImage" class="fileinput-new">Select image </span>
                        <span id="Change" class="fileinput-exists">Change </span>
                        <input type="file" name="logoInput" id="fileup" />
                    </span>
                    <a href="#" class="btn red fileinput-exists" id="Remove" data-dismiss="fileinput">Remove </a>
                </div>
                <div class="form-group">
                    <button type="button" class="btn green" id="SaveProfilPic">Save</button>
                </div>
            </div>
        </div>
    </div>
</form>

然后在 JavaScript 文件中创建一个普通的 ajax 调用并将表单作为参数传递

$(document).ready(function () {
$('#SaveProfilPic').on('click', function () {
    var formCol = $('#LogoForm');
    $.ajax({
        type: 'POST',
        url: 'URL of your webmethod',
        data: new FormData(formCol[0]),
        processData: false,
        contentType: false,
        success: function (data) {
            Alert('Succsess');
        }
    });
});

【讨论】:

    猜你喜欢
    • 2011-11-15
    • 1970-01-01
    • 1970-01-01
    • 2018-04-12
    • 1970-01-01
    • 2010-10-15
    • 1970-01-01
    相关资源
    最近更新 更多