Загрузка изображений

ASP.NET
  1. 4 года назад

    Здравствуйте,подскажите, как загрузить изображение на сервер и без перезагрузки страницы его отобразить.НА php эту проблему решал,а вот как тут не знаю.Заранее спасибо, буду крайне признателен.

  2. Alexandr_Erohin

    Mar 31 Администратор

    HTML-форма со скриптами и стилями:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
        Inherits="ImageLoader.Default" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>professorweb.ru</title>
    
    </head>
    <body>
        <form method="post" enctype="multipart/form-data" id="image-load">
            <div class="upload">
                <span class="button1"><span>Выбрать</span></span>
                <span class="input" runat="server" id="input"><span>Выберите файл</span></span>
                <input type="file" id="file" name="file" onchange="this.previousSibling.previousSibling.firstChild.innerText = this.value" />
            </div>
            <input type="submit" value="Загрузить" />
            <span class="error"></span>
            <span class="status"></span>
            <div style="clear: both"></div>
        </form>
        <div class="result">
    
        </div>
    
    <!-- Скрипты -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            $('body').on('submit', 'form#image-load', function (e) {
                // Отключить отправку формы
                e.preventDefault();
    
                var $this = $(this),
                    file = $this.find('input[type="file"]').get(0).files[0],    // Файл для загрузки
                    err = $this.find('span.error');             // Текстовое поле с ошибкой
    
                // Сбросить поля при повторной отправке
                $this.find('input[type="file"]').val(null);
                err.text('');
    
                if (file !== undefined) {
                    // Объект FormData используется при авсинхронной отправке файлов,
                    // доваляем свойство file с загруженным файлом
                    var formData = new FormData();
                    formData.append("file", file);
    
                    // Оптравляем файл на сервер
                    $.ajax({
                        url: '/MySite.asmx/UploadImage',         // Ссылка на веб-службу
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType: "json",
                        type: "post",
                        beforeSend: function () {
                            $('.status').val('Загрузка...');
                        },
                        success: function (data) {
                            if (data.status) {
                                // Показать заугрженное изображение
                                $('.result').append($('<img src="' + data.imageUrl + '" />'));
                            }
                            else err.text(data.msg);
                        },
                        error: function (jqXHR, textStatus, errorMessage) {
                            err.text(errorMessage);
                        }
                    });
                }
                else
                    err.text('Файл не выбран');
            });
        });
    </script>
    
    <!-- Стили для формы -->
    <style>
    #image-load {
        width: 500px;
        margin: 0 auto;
    }
    
        .upload {
            position: relative;
            height: 30px;
            border: 2px solid rgba(0,0,0,0.2);
            cursor: pointer;
            margin: 0 auto;
        }
    
    .upload:after {
        content: '';
        display: block;
        overflow: hidden;
        height: 0;
        clear: both;
    }
    
    .upload input {
        position: absolute;
        height: 100%;
        width: 100%;
        display: block;
        z-index: 10;
        cursor: pointer;
        opacity: 0;
    }
    
    .upload .button1 {
        position: relative;
        display: block;
        background: #60bb29;
        height: 100%;
        width: 20%;
        float: left;
        z-index: 1;
        line-height: 30px;
        text-align: center;
        color: white;
    }
    
    .upload .input {
        position: relative;
        display: block;
        height: 100%;
        width: 80%;
        float: left;
        z-index: 1;
        line-height: 30px;
        border-radius: 0 8px 8px 0;
        font-style: italic;
        font-size: 14px;
        color: #bbb;
        text-align: left;
    }
    
    .upload .input > span {
        margin-left: 10px;
     }
    
    input[type="submit"] {
        margin: 10px 0;
        float: left;
    }
    
    .error, .status {
        float: right;
        color: red;
        margin: 12px 0;
    }
    
    .status {
        color: #111;
    }
    
    .result {
        text-align: center;
    }
    
    .result img {
        display: inline-block;
        margin: 20px 0;
        box-sizing: content-box;
    }
    </style>
    </body>
    </html>

    Веб-служба .asmx на сервере (добавляется через шаблон Web Service):

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text.RegularExpressions;
    using System.IO;
    using System.Drawing;
    using System.Drawing.Imaging;
    using System.Web;
    using System.Web.Services;
    using System.Web.Script.Services;
    using System.Web.Script.Serialization;
    
    namespace ImageLoader
    {
        [ScriptService]
        public class MySite : System.Web.Services.WebService
        {
            // Ограничение на размер файла в кБ
            private const int __MaxSise = 50;
    
            // Ограничения на тип файлов (рег. выражение),
            // в данном случае разрешается загружать только картинки JPG или PNG
            private const string __FileType = @"(image/jp[e]?g)|(image/png)";
    
    
            /// <summary>
            /// Загрузка изображений (Ajax) на сервере
            /// </summary>
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            [WebMethod(EnableSession = true)]
            public void UploadImage()
            {
                // Установить заголовки (назад возвращаем JSON-данные о загруженном файле)
                this.Context.Response.ContentType = "application/json; charset=utf-8";
    
                try
                {
                    // Получить файл
                    HttpPostedFile file = Context.Request.Files["file"];
    
                    if (file != null)
                    {
                        // Проверить тип файла
                        if (Regex.IsMatch(file.ContentType, __FileType))
                        {
                            // Проверить размер файла
                            if (file.ContentLength / 1024 <= __MaxSise)
                            {
                                // Все норм, загрузить файл
    
                                // Придумать случайное имя для файла (по тек. времени)
                                string fname = DateTime.Now.ToString("ddMMyyyyHHmmss.")
                                    + Regex.Match(file.ContentType, @"(?:image/(?<ext>jp[e]?g)|image/(?<ext>png))").Groups["ext"].Value.Replace("jpeg", "jpg");
                                    
                                fname = Server.MapPath("/uploads/" + fname);        // Сохраняется в папку uploads (если ее нет, то нужно будет создать)
                                file.SaveAs(fname);
    
                                // Вернуть вызывающему коду JavaScript URL до загруженной картинки
                                Context.Response.Write(new JavaScriptSerializer().Serialize(new
                                {
                                    status = true,
                                    imageUrl = Context.Request.Url.GetLeftPart(UriPartial.Authority) + 
                                        fname.Replace(Context.Request.ServerVariables["APPL_PHYSICAL_PATH"], "/").Replace(@"\", "/")
                                    
                                }));
                            }
                            else Context.Response.Write(new JavaScriptSerializer().Serialize(new
                            {
                                status = false,
                                msg = String.Format("Файл должен весить меньше {0} kB", __MaxSise)
                            }));
                        }
                        else Context.Response.Write(new JavaScriptSerializer().Serialize(new
                        {
                            status = false,
                            msg = "Некорректный формат изображения, разрешается PNG или JPEG."
                        }));
                    }
                    else Context.Response.Write(new JavaScriptSerializer().Serialize(new
                    {
                        status = false,
                        msg = "Файл не найден."
                    }));
                }
                catch (Exception ex)
                {
                    Context.Response.Write(new JavaScriptSerializer().Serialize(new
                    {
                        status = false,
                        msg = ex.Message //"Ошибка на сервере."
                    }));
                }
            }
    
            // Вспомогательный метод для получения кодека изображения из MIME-типа
            private static ImageCodecInfo GetImageCodecInfoFromeMimeType(string mimeType)
            {
                // Загрузить все доступные кодеки
                ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
    
                // Найти нужный
                for (int i = 0; i < codecs.Length; i++)
                    if (codecs[i].MimeType == mimeType)
                        return codecs[i];
                return null;
            }
        }
    }
  3. Добавлено 4 года назад zkolya

    Большое спасибо,что так подробно объяснили,но не затруднит ли Вас, объяснить,что я сделал не так
    Показывает ошибку
    Если Вас не затруднит и несложно,то вот архив с приложением http://zkolyaproba.somee.com/StartApplication.html

    Ошибка синтаксического анализатора
    
    Описание: Ошибка при разборе ресурса, требуемого для обслуживания этого запроса. Изучите следующие подробные сведения о данной ошибке разбора и измените исходный файл. 
    
    Сообщение об ошибке синтаксического анализатора: Не удалось загрузить тип 'ImageLoader.Default'.
    
    Ошибка источника: 
    
    
    Строка 1:  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ImageLoader.Default" %>
    Строка 2:  
    Строка 3:  <!DOCTYPE html>
    
    Исходный файл: /uploadimg/Default.aspx    Строка: 1 
  4. Alexandr_Erohin

    Apr 1 Администратор

    Сообщение об ошибке синтаксического анализатора: Не удалось загрузить тип 'ImageLoader.Default'.

    Ну ты чего серьезно просто скопировал весь код из моего поста и вставил его в форму? ImageLoader - это пространство имен в моем приложении, у тебя оно однозначно другое (добавляешь форму Default.aspx в проект, строку состояния вверху формы оставляешь свою <%@ ... %>, остальной код копируешь). Рекомендую почитать статьи в разделе основы ASP.NET, прежде чем начинать работать с ASP NET

  5. А у Вас нет урока на эту тему?

  6. Alexandr_Erohin

    Apr 2 Администратор

    Вот исходники проекта, чтобы не было вопросов: ссылка

    Еще раз рекомендую ознакомиться с основами ASP.NET, а то получается что ты задал вопрос "Как на ASP.NET реализовать асинхронную Ajax-загрузку изображений на сервер?" и при этом не знаешь того как работают простые веб-формы (исходя из глупого вопроса в третьем посте)

  7. Добавлено 4 года назад zkolya

    Просто никогда со службами не связывался.Спасибо Вам

или зарегистрируйтесь чтобы ответить