none
MVC 3 Razor как загрузить картинку с помощю сериализации json RRS feed

  • Вопрос

  • существует формачка веб. Где есть пару полей, которые надо заполнить и возможность прикрепить файл изображения. Так вот, это всё мне надо передать в контроллер, где далее это всё запишется в SQL базу.

    Поля я передаю без проблем, как структуру.

    форма в Index

                        
    <div class="header-doc-div">
            <table>
                <tr><td><b><font size='2'>Тип оборудования:</font></b></td> <td><input id='EquipmentType' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Клиент:</font></b></td> <td><input id='Client' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Серийный номер:</font></b></td> <td><input id='SerialNumber' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Модель:</font></b></td> <td><input id='Model' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Парт-номер оборудования:</font></b></td> <td><input id='PartNumber' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Номер з/н (биллер):</font></b></td> <td><input id='BillerNumber' class='txtboxToFilter' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Номер з/н (вендор):</font></b></td> <td><input id='VendorNumber' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Номер з/н (ТЗ):</font></b></td> <td><input id='InsideNumber' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Дата начала ремонта:</font></b></td> <td><input id='StartDate' type="text" class="DatePicker" style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Дефект:</font></b></td> <td><input id='Defect' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Дата производства:</font></b></td> <td><input id='ProducedDate' type="text" class="DatePicker" style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Дата продажи:</font></b></td> <td><input id='SaleDate' type="text" class="DatePicker" style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Выполненные работы:</font></b></td> <td><input id='Works' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Комментарий:</font></b></td> <td><input id='Comments' type="text"  style="font-size: 12px;"/></td></tr>
                <tr><td><b><font size='2'>Выбрать файл (файл не больше 500 KB):</font></b></td> <td><input id='Img' type="file" accept="image/*" /></td></tr>
    
                <tr><td></td><td><input type="submit" OnClick="AcceptConclusion()" style="font-size: 12px;width:133px" value="Сохранить Т.З."/></td></tr>
    
            </table>
        </div>

    файл Java

    function AcceptConclusion() {
        var obj = new Object;
        obj.EquipmentType = $('#EquipmentType').val();
        obj.Client = $('#Client').val();
        obj.SerialNumber = $('#SerialNumber').val();
        obj.Model = $('#Model').val();
        obj.PartNumber = $('#PartNumber').val();
        obj.BillerNumber = $('#BillerNumber').val();
        obj.VendorNumber = $('#VendorNumber').val();
        obj.InsideNumber = $('#InsideNumber').val();
        obj.Defect = $('#Defect').val();
        obj.Works = $('#Works').val();
        obj.Img = $('#Img').val();
        obj.StartDate = $('#StartDate').val();
        obj.ProducedDate = $('#ProducedDate').val();
        obj.SaleDate = $('#SaleDate').val();
        obj.Comments = $('#Comments').val();
        
        var json = $.toJSON(obj);
    
        $.ajax({
            type: 'POST',
            url: '/TechnicalConclusion/CreateTZ',
            data: json,
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                if (result == 'True') {
                    alert('Данные успешно приняты и обработаны контроллером!');
                    window.location.reload(true);
                };
            }
        });
        return false;
    };

    мой класс для сериализации

    public class TechnicalConcusionFields
        {
            public String EquipmentType { get; set; }
            public String Client { get; set; }
            public String SerialNumber { get; set; }
            public String Model { get; set; }
            public String PartNumber { get; set; }
            public String BillerNumber { get; set; }
            public String VendorNumber { get; set; }
            public String InsideNumber { get; set; }
            public String Defect { get; set; }
            public String Works { get; set; }
            public String Img { get; set; }//это поле так для примера. тут должено быть изображение
            public String StartDate { get; set; }
            public String ProducedDate { get; set; }
            public String SaleDate { get; set; }
            public String Comments { get; set; }
        }

    ну и контроллер

    [HttpPost]
            public Boolean CreateTZ(TechnicalConcusionFields inputModel)
            {
              return true;
            }

    так вот, как мне передать вместе с этими полями файл изображения?


    22 января 2013 г. 13:14

Ответы

  • Привет

    Вот здесь вы можете посмотреть пример, как передать файл и данные в контроллер и сразу в виде модели надеюсь это поможет вам.


         )))) Спасибо за ответ. Я так-же сделал в итоге.

    Всем спасибо за участие. В итоге решил без js делать (оказывается в js нельзя приобразовать картинку в байты).
    Вот решение, если кому интерестно.
    мои поля в Index

    @{
        using (Html.BeginForm("CreateTZ", "TechnicalConclusion", FormMethod.Post, new { enctype = "multipart/form-data" }))//обязательный параметр для передачи файлов в контроллер enctype = "multipart/form-data"
                 {
                     <table>
                         <tr><td><b><font size='2'>Тип оборудования:</font></b></td> <td><input id='EquipmentType' name='EquipmentType' type="text"  st yle="font-size: 12px;" required/></td></tr>
                         <tr><td><b><font size='2'>Клиент:</font></b></td> <td><input id='Client' name='Client' type="text"  st yle="font-size: 12px;"/></td></tr>
                         <tr><td><b><font size='2'>Серийный номер:</font></b></td> <td><input id='SerialNumber' name='SerialNumber' type="text"  st yle="font-size: 12px;"/></td></tr>
                         <tr><td><b><font size='2'>Модель:</font></b></td> <td><input id='Model' name='Model' type="text"  st yle="font-size: 12px;"/></td></tr>
                    <tr><td><b><font size='2'>Выбрать файл (файл не больше 500 KB):</font></b></td> <td><input id='Img' name='Img' type="file" accept="image/*"  /></td></tr>
                         <tr><td></td><td><input type="submit" st yle="font-size: 12px;width:133px" value="Сохранить Т.З."/></td></tr>
                     </table>
                      }
             }

    код модели

    public class TechnicalConcusionFields
        {
            public String EquipmentType { get; set; }
            public String Client { get; set; }
            public String SerialNumber { get; set; }
            public String Model { get; set; }
            public HttpPostedFileBase Img { get; set; }
        }

    ну и код контроллера

    [HttpPost]
            public Boolean CreateTZ(TechnicalConcusionFields inputModel)
            {
                byte[] img;
    
                // фото --------------------------------------------------------------
                    img = new byte[inputModel.Img.ContentLength];//задаём размер массива
                    inputModel.Img.InputStream.Read(img, 0, inputModel.Img.ContentLength);//и теперь впихиваем наши биты в массив img
                // --------------------------------------------------------------------
    
                //****************************
                // тут можно записать данные в базу. Пример кода не привожу.
                // поле в базу данных хранящее наш файл, должно иметь тип varbinary и к стати для хранения расширения файла надо создать поле, чтоб потом когда вы
                // выгрузите обратно файл, то знать с каким расширением его сохранять.
                //*****************************
    
    //-------------------------- пример вытаскивания изображения из базы и сохранение на диск
    //тут я не буду показывать как данные тащутся из базы. Просто покажу как их преобразовать в файл.
    //---------------------------------------------------------------------------------------
    
                var memoryStream = new MemoryStream();
                    memoryStream.Write(Img, 0, Img.Length); // Img-это наши данные которые мы записавали в базу и теперь я их вытащил в переменную Byte[] Img
                    var image = Image.FromStream(memoryStream);//преобразовываем в изображение
                    image.Save(@"C:\1.png");//ну и сохраняем
                    memoryStream.Dispose();
                    image.Dispose();
    
                return true;
            }

    • Помечено в качестве ответа Abolmasov Dmitry 25 января 2013 г. 12:12
    23 января 2013 г. 15:04

Все ответы

  • Преобразуйте в вашем скрипте изображение в массив байтов, да пишите спокойно в базу.

    И если не секрет, есть какое-то обязательное требование использовать JSON?


    [Блог] [Twitter]


    22 января 2013 г. 14:50
  • Преобразуйте в вашем скрипте изображение в массив байтов, да пишите спокойно в базу.

    И если не секрет, есть какое-то обязательное требование использовать JSON?




    Так вот об этом я и спрашиваю. Как это сделать?

    P.S. Я просто не знаю java-ву и на Asp-е первый раз работаю, просто надо кое-что добавить к уже существующему проекту. а веб для меня это смерть).

    можете мне по подробнее объяснить. За ранее благодарю.

    22 января 2013 г. 15:12
  • Привет

    Вот здесь вы можете посмотреть пример, как передать файл и данные в контроллер и сразу в виде модели - MVC 3 file upload and model binding, надеюсь это поможет вам.


    Для связи [mail]

    23 января 2013 г. 12:32
  • Привет

    Вот здесь вы можете посмотреть пример, как передать файл и данные в контроллер и сразу в виде модели надеюсь это поможет вам.


         )))) Спасибо за ответ. Я так-же сделал в итоге.

    Всем спасибо за участие. В итоге решил без js делать (оказывается в js нельзя приобразовать картинку в байты).
    Вот решение, если кому интерестно.
    мои поля в Index

    @{
        using (Html.BeginForm("CreateTZ", "TechnicalConclusion", FormMethod.Post, new { enctype = "multipart/form-data" }))//обязательный параметр для передачи файлов в контроллер enctype = "multipart/form-data"
                 {
                     <table>
                         <tr><td><b><font size='2'>Тип оборудования:</font></b></td> <td><input id='EquipmentType' name='EquipmentType' type="text"  st yle="font-size: 12px;" required/></td></tr>
                         <tr><td><b><font size='2'>Клиент:</font></b></td> <td><input id='Client' name='Client' type="text"  st yle="font-size: 12px;"/></td></tr>
                         <tr><td><b><font size='2'>Серийный номер:</font></b></td> <td><input id='SerialNumber' name='SerialNumber' type="text"  st yle="font-size: 12px;"/></td></tr>
                         <tr><td><b><font size='2'>Модель:</font></b></td> <td><input id='Model' name='Model' type="text"  st yle="font-size: 12px;"/></td></tr>
                    <tr><td><b><font size='2'>Выбрать файл (файл не больше 500 KB):</font></b></td> <td><input id='Img' name='Img' type="file" accept="image/*"  /></td></tr>
                         <tr><td></td><td><input type="submit" st yle="font-size: 12px;width:133px" value="Сохранить Т.З."/></td></tr>
                     </table>
                      }
             }

    код модели

    public class TechnicalConcusionFields
        {
            public String EquipmentType { get; set; }
            public String Client { get; set; }
            public String SerialNumber { get; set; }
            public String Model { get; set; }
            public HttpPostedFileBase Img { get; set; }
        }

    ну и код контроллера

    [HttpPost]
            public Boolean CreateTZ(TechnicalConcusionFields inputModel)
            {
                byte[] img;
    
                // фото --------------------------------------------------------------
                    img = new byte[inputModel.Img.ContentLength];//задаём размер массива
                    inputModel.Img.InputStream.Read(img, 0, inputModel.Img.ContentLength);//и теперь впихиваем наши биты в массив img
                // --------------------------------------------------------------------
    
                //****************************
                // тут можно записать данные в базу. Пример кода не привожу.
                // поле в базу данных хранящее наш файл, должно иметь тип varbinary и к стати для хранения расширения файла надо создать поле, чтоб потом когда вы
                // выгрузите обратно файл, то знать с каким расширением его сохранять.
                //*****************************
    
    //-------------------------- пример вытаскивания изображения из базы и сохранение на диск
    //тут я не буду показывать как данные тащутся из базы. Просто покажу как их преобразовать в файл.
    //---------------------------------------------------------------------------------------
    
                var memoryStream = new MemoryStream();
                    memoryStream.Write(Img, 0, Img.Length); // Img-это наши данные которые мы записавали в базу и теперь я их вытащил в переменную Byte[] Img
                    var image = Image.FromStream(memoryStream);//преобразовываем в изображение
                    image.Save(@"C:\1.png");//ну и сохраняем
                    memoryStream.Dispose();
                    image.Dispose();
    
                return true;
            }

    • Помечено в качестве ответа Abolmasov Dmitry 25 января 2013 г. 12:12
    23 января 2013 г. 15:04