asp.net - iformfile - mvc core file upload example



我怎樣才能使用JavaScript上傳文件沒有回傳? (4)

如果您正在使用Visual Studio 2008(或者在05中安裝了Ajax),那麼在您的輸入字段周圍包裝一個更新面板,這將使用javascript(ajax)異步回發。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>

我正在ASP.NET中的文件上傳。 我用<input type=file id=upload><input type=button id="btnupload" value="File Upload">

我想用JavaScript上傳文件。 更新面板不起作用,我不希望它回發並刷新頁面。

謝謝,但如果你有JavaScript的fileUpload相關的代碼然後發送給我。 請幫幫我。


Answer #1

如果要防止刷新頁面,請發送一個204 No Content HTTP標頭。


Answer #2

你可以使用jQuery和jQuery表單插件 。 我用這個組合為少數項目,我沒有問題,即使是大文件(10MB)

<form action="form.asp" method="post">
.......
</form>
$('form').submit(function(){
 $(this).ajaxSubmit(function(data){
  $('#updateDiv').html(data); // or append/prepend/whatever
 })
 return false
})

當然,表單的動作會返回你需要更新的內容。 您可能想要添加一些額外的功能來處理錯誤,但是這應該工作正常


Answer #3

使用jQuery表單插件的上傳功能( http://www.malsup.com/jquery/form/ )使用( http://www.fyneworks.com/jquery/multiple-file-upload/ )的能力來指定要上傳多個文件

這是它是如何工作的,表單插件可以讓你發布數據到一個頁面而無需刷新,多文件插件讓你通過瀏覽指定多個文件。

<form id="uploadForm" enctype="multipart/form-data" method="post" action="FileHandler.ashx">
<input type="hidden" value="100000" name="MAX_FILE_SIZE"/>
File:
<input type="file" name="file"/>
<input type="submit" value="Submit"/>
</form>

所以基本上上面的小html提交到FileHandler.ashx,無論是在輸入框(希望),添加一個HTTP處理程序在你的asp項目,下面的小代碼

<%@ WebHandler Language="C#" Class="FileHandler" %>

using System;
using System.Web;
using System.IO;

public class FileHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
string strSaveLocation = context.Server.MapPath("Upload") + "" + strFileName;
context.Request.Files[0].SaveAs(strSaveLocation);

context.Response.ContentType = "text/plain";
context.Response.Write("success");
}

public bool IsReusable
{
get
{
return false;
}
}
}

所有這些從這裡遺漏的是包括你的ASPX頁面上的JS腳本,我認為:)祝你好運





upload