使用Twitter的引导，C＃，asp.net和JavaScript文件上传 [英] File Upload using Twitter Bootstrap, C#, asp.net and javascript

问题描述

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

链接到什么形式看起来像 http://img507.imageshack.us/img507 /3308/picpx.png

link to what the form looks like http://img507.imageshack.us/img507/3308/picpx.png

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

I am using the Jasny Javascript file upload in my boot strap project, it looks like this:

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>

我如何去在code背后用这个来保存附加的文件到我的服务器，我会使用C＃asp.net文件上传？

How do I go about using this in the code behind to save the attached file to my server as I would using the C# asp.net File Upload?

在ASP.net C＃我通常会做在后面的code：

In ASP.net C# I would normally do this in the code behind:

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上介绍如何设置使用引导这是伟大的，因为它看起来非常好（远好于枯燥的asp文件上传），但我如何真正得到我张贴在我的按钮点击布局？我真的很想得到这个工作，因为我认为它看起来更好堆。

The Jasny github explains how to set the layout using bootstrap which is great as it looks really good (much better than the boring asp file upload) but How do I actually get I to post on my button click? I would really like to get this to work as I think it looks heaps nicer.

推荐答案

既然你想这样做没有一个标准的asp.net控制，你将不得不做一些ASP.NET确实为你的接线。

Since you want to do this without a standard asp.net control, you will have to do some of the wiring that asp.net does for you.

请确保您的输入有一个id。我会在这里将其设置为MyFile的。

Make sure your input has an id. I will set it here to 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 控件到您的网页。像这样的：

Your page should now have a HtmlInputFile control to your page. like this:

protected HtmlInputFile myFile;

然后，你应该能够接收文件：

Then you should be able to receive the file:

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

    }
}

这篇关于使用Twitter的引导，C＃，asp.net和JavaScript文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！