使用 Twitter Bootstrap、C#、asp.net 和 javascript 上传文件

Posted 2023-02-22

【中文标题】使用 Twitter Bootstrap、C#、asp.net 和 javascript 上传文件

【英文标题】：File Upload using Twitter Bootstrap, C#, asp.net and javascript

【发布时间】：2012-08-21 13:26:46

【问题描述】：

链接到 Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload

链接到表单的样子http://img507.imageshack.us/img507/3308/picpx.png

我在我的引导项目中使用 Jasny Javascript 文件上传，它看起来像这样：

ASP\HTML 视图

<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1"><i class="icon-file  
fileupload-exists"></i> <span class="fileupload-preview" style=""></span></div><span 
class="btn btn-file"><span class="fileupload-new">Select file</span><span 
class="fileupload-exists">Change</span><input type="file"></span><a href="#" class="btn 
fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>

如何在后面的代码中使用它来将附件保存到我的服务器，就像使用 C# asp.net 文件上传一样？

在 ASP.net C# 中，我通常会在后面的代码中执行此操作：

ASP.net C# CodeBehind

string filename = FileUpload1.PostedFile.FileName;
FileUpload1.PostedFile.SaveAs(Path.Combine(Server.MapPath("\\Document"), 
filename).ToString());
                filelocation = "Document\\" + filename;
                media = "Document";

Jasny github 解释了如何使用 bootstrap 设置布局，这很棒，因为它看起来非常好（比无聊的 asp 文件上传要好得多），但是我如何真正让我在点击按钮时发布？我真的很想让这个工作，因为我认为它看起来更好。

【参考方案1】：

由于您想在没有标准 asp.net 控件的情况下执行此操作，因此您必须执行一些 asp.net 为您完成的接线。

确保您的输入有一个 id。我将在此处将其设置为 myFile。

<div class="row-fluid">
    <div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
        <div class="input-append">
            <div class="uneditable-input span2" runat="server" id="statment1">
                <i class="icon-file fileupload-exists"></i> 
                <span class="fileupload-preview" style=""></span>
            </div>
            <span class="btn btn-file"><span class="fileupload-new">Select file</span>
            <span class="fileupload-exists">Change</span><input id="myFile" type="file" runat="server">
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
        </div>
    </div>
</div>

您的页面现在应该有一个HtmlInputFile 控件到您的页面。像这样：

protected HtmlInputFile myFile;

那么你应该可以收到文件了：

if (IsPostBack)

    if (myFile.PostedFile != null)
    
        // File was sent
        var postedFile = myFile.PostedFile;
        int dataLength = postedFile.ContentLength;
        byte[] myData = new byte[dataLength];
        postedFile.InputStream.Read(myData, 0, dataLength);
    
    else
    
        // No file was sent

    

【讨论】：

太棒了！很好的解释，我有点傻现在我认为这会比这更难。

@nunespascal 我应该把“if (IsPostBack ...”)放在哪里？在哪个页面？在哪个潜艇？

这将出现在具有您的 HtmlInputFile 控件的任何页面上。查看控件生命周期以更好地了解回发。