2

Я загружаю на сервер изображения ASP.Net WebForms, с помощью ajax jQuery. Вот код jQuery:

$(document).ready(function () {
        $("#Button1").click(function (evt) {
            var fileUpload = $("#FileUpload1").get(0);
            var files = fileUpload.files;

            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            var options = {};
            options.url = "fileuploadHandler.ashx";
            options.type = "POST";
            options.data = data;
            options.contentType = false;
            options.processData = false;
            options.success = function (result) { alert(result); };
            options.error = function (err) { alert(err.statusText); };

            $.ajax(options);

            evt.preventDefault();
        });
    });

Вот fileuploadHandler.ashx

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

using System;
using System.Web;

public class fileuploadHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {


        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                string fname = context.Server.MapPath("~/img/" + "111"+file.FileName);
                file.SaveAs(fname);
            }
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write("File(s) Uploaded Successfully!");




    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

и форма

<form id="form1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" Multiple="Multiple" />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Upload Selected File(s)" />
</form>

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

2
  • Результатом загрузки возвращайте не строку "File(s) Uploaded Successfully!", а stream изображения. Ну я самый простой способ - использовать стандартные средства asp.net (UpdatePanel), которые сами генерируют нужный ajax-функционал - не всегда оптимально, конечно, но зато можно очень быстро "на коленках" сделать приложение.
    – Ella S.
    Commented 25 апр. 2015 в 5:41
  • подправил ответ для нескольких файлов. если есть вопросы - задавайте их в комментариях.
    – user177221
    Commented 3 мая 2015 в 9:52

1 ответ 1

1

На сервере: выдавайте вместо сообщения url-ы загруженных картинок, разделенные спецсимволом:

public void ProcessRequest(HttpContext context)
{
    List<string> filenames = new List<string>();

    HttpFileCollection files = context.Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFile file = files[i];
        string filename = "~/img/" + "111" + file.FileName;
        filenames.Add(filename);

        file.SaveAs(context.Server.MapPath(filename));
    }

    context.Response.ContentType = "text/plain";
    context.Response.Write(String.Join("|", filenames.Select(VirtualPathUtility.ToAbsolute)));
}

На клиенте: добавьте в разметку пустой div, в котором вы будете покаызвать картинки:

<asp:FileUpload ID="FileUpload1" runat="server" Multiple="Multiple" ClientIDMode="Static" />
<br />
<div id="imagesPlaceholder"></div>
<br />
<asp:Button ID="Button1" runat="server" Text="Upload Selected File(s)" ClientIDMode="Static" />

ClientIDMode="Static" заставляет ASP.NET использовать именно те ID, которые вписаны в коде, а не генерировать свои вида MainContent_FileUpload1. В качестве альтернативы можно писать конструкции вида $("#<%= Button1.ClientID %>") для подстановки в скрипт сгенерированных ID.

В обработчике success разрезайте пришедшую с сервера строчку, и создавайте элементы <img src='...'>:

$(document).ready(function () {
    $("#Button1").click(function (evt) {
        var fileUpload = $("#FileUpload1").get(0);
        var files = fileUpload.files;

        var data = new FormData();
        for (var i = 0; i < files.length; i++) {
            data.append(files[i].name, files[i]);
        }
        var options = {};
        options.url = "fileuploadHandler.ashx";
        options.type = "POST";
        options.data = data;
        options.contentType = false;
        options.processData = false;
        options.success = function (result) {
            var urls = result.split('|');
            var imgs = $.map(urls, function (url) {
                return $("<img />").attr("src", url);
            });
            $("#imagesPlaceholder").append(imgs);
        };
        options.error = function (err) { alert(err.statusText); };

        $.ajax(options);

        evt.preventDefault();
    });
});

Но вообще лучше не смешивайте Web Forms и динамику. Переходите на ASP.NET MVC.

UPD: вариант под .NET 2.0:

public void ProcessRequest(HttpContext context)
{
    List<string> urls = new List<string>();

    HttpFileCollection files = context.Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFile file = files[i];
        string filename = "~/img/" + "111" + file.FileName;
        urls.Add(VirtualPathUtility.ToAbsolute(filename));

        file.SaveAs(context.Server.MapPath(filename));
    }

    context.Response.ContentType = "text/plain";
    context.Response.Write(String.Join("|", urls.ToArray()));
}
8
  • ,почему то Ваш вариант не работает. Пытался сделать так. context.Response.ContentType = "text/plain"; context.Response.Write(VirtualPathUtility.ToAbsolute("~/img/" + "111" + file.FileName)); это ведь в цикле?
    – zkolya
    Commented 25 апр. 2015 в 22:00
  • ,прошу прощения,в смысле к вашему добавить?Отредактировать Ваш?context.Response.ContentType = "text/plain"; context.Response.Write(VirtualPathUtility.ToAbsolute("~/img/" + "111" + file.FileName));
    – zkolya
    Commented 27 апр. 2015 в 10:31
  • ,или же отредактировать ваше сообщение,не очень понял,что вы имели в виду.
    – zkolya
    Commented 27 апр. 2015 в 16:59
  • context.Response.Write(String.Join("|", filenames.Select(VirtualPathUtility.ToAbsolute))); Не подскажите,почему выводит ошибку,в данной строке Select подчеркивает
    – zkolya
    Commented 3 мая 2015 в 12:44
  • using System.Linq в начале файла добавьте
    – user177221
    Commented 3 мая 2015 в 14:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.