Как я могу загрузить файл с помощью JavaScript без обратной передачи?

Question

Я работаю над загрузкой файлов в ASP.NET. Я использовал <input type=file id=upload> и <input type=button id="btnupload" value="File Upload">

Я хочу загрузить файл в JavaScript. Панель обновления не работает, я не хочу, чтобы она публиковала и обновляла страницу.

спасибо, но если у вас есть код, связанный с fileUpload в javascript, пришлите мне. Помогите мне, пожалуйста.

Answer 1

Вы можете использовать jQuery и плагин формы jQuery . Я использовал эту комбинацию для нескольких проектов, и у меня не было проблем, даже для больших файлов (10 МБ)

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

Конечно, действие формы вернет то, что вам нужно обновить. Вы можете добавить некоторые дополнительные функции для обработки ошибок, но это должно нормально работать

Answer 2

использовать плагин формы 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;
}
}
}

все, чего здесь не хватает, это скрипты js на странице aspx, я думаю :) удачи

Answer 3

Я не уверен в "правильном" способе сделать это с помощью ASP.NET, но, как правило, вам понадобится ваша форма и скрытый iframe, который форма отправляет:

<script type="text/javascript">
    function handleUploadResponse(...) {
        // do something...
    }
</script>
<form method="post" action="upload.aspx" target="hiddenframe" enctype="multipart/form-data"></form>
<iframe id="hiddenframe" name="hiddenframe" style="display:none"></iframe>

Когда вы отправляете форму, она будет публиковаться в любом скрипте, который будет обрабатывать загрузку в скрытом фрейме. По завершении страница скрытого фрейма вызывает window.parent.handleUploadResponse(...);, которая вызывает функцию handleUploadResponse() на родительской странице, которая инициировала загрузку.

Answer 4

Если вы используете Visual Studio 2008 (или Ajax установлен в 05), тогда оберните панель обновления вокруг полей ввода, это сделает асинхронный постбэк с использованием 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>

Answer 5

Если вы хотите предотвратить обновление страницы, отправьте HTTP-заголовок 204 No Content.