使用 Twitter Bootstrap、C#、asp.net 和 javascript 上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12135529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File Upload using Twitter Bootstrap, C#, asp.net and javascript
提问by Audo
link to Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload
链接到 Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload
link to what the form looks like http://img507.imageshack.us/img507/3308/picpx.png
链接到表单的样子http://img507.imageshack.us/img507/3308/picpx.png
I am using the Jasny Javascript file upload in my boot strap project, it looks like this:
我在我的引导带项目中使用 Jasny Javascript 文件上传，它看起来像这样：
ASP\HTML VIEW
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>
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?
我如何在后面的代码中使用它来将附加文件保存到我的服务器，就像我使用 C# asp.net 文件上传一样？
In ASP.net C# I would normally do this in the code behind:
在 ASP.net C# 中，我通常会在后面的代码中执行此操作：
ASP.net C# CodeBehind
ASP.net C# 代码隐藏
string filename = FileUpload1.PostedFile.FileName;
FileUpload1.PostedFile.SaveAs(Path.Combine(Server.MapPath("\Document"),
filename).ToString());
filelocation = "Document\" + filename;
media = "Document";
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.
Jasny github 解释了如何使用 bootstrap 设置布局，这很好，因为它看起来非常好（比无聊的 asp 文件上传好得多）但是我如何真正让我在我的按钮点击上发布？我真的很想让它工作，因为我认为它看起来更好。
采纳答案by nunespascal
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.
由于您想在没有标准 asp.net 控件的情况下执行此操作，因此您必须执行 asp.net 为您所做的一些接线工作。
Make sure your input has an id. I will set it here to myFile.
确保您的输入有一个 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>
Your page should now have a HtmlInputFilecontrol to your page. like this:
您的页面现在应该可以HtmlInputFile控制您的页面。像这样：
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
}
}
