Вывод изображения из папки asp.net ajax

282

12 декабря 2016, 10:01

Я загружаю на сервер изображения 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. Заранее большое спасибо.

Answer 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()));
}