Как сохранить изображение в другой папке с помощью ajax и jquery

Question

У меня есть регистрационная форма (приложение Spring mvc), которая имеет некоторые поля, а также возможность загрузки изображений, я посылаю значение поля контроллеру с помощью функции ajax через serialize()

Теперь я хочу отправить изображение через один и тот же запрос, и что когда-либо изображение, выбранное пользователем, которое должно быть предварительно просмотрено пользователем перед отправкой запроса на контроллер. поэтому для предварительного просмотра, я уверен, преобразование выбранного изображения в байт-код и добавив, что «ЦСИ» атрибут тега изображения

Jquery Для предварительного просмотра изображения

function readURL(input) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 

        $('#imagePreview').attr('src', e.target.result); 
       } 
       reader.readAsDataURL(input.files[0]); 
      } 
     } 
     $("#imgInput").change(function(){ 

      readURL(this); 

     }); 

HTML изображения и ввода тегов

<input name=file type="file" id="imgInput"></input> 
<img id="imagePreview" src="" alt="Item Image" width="96" height="80"/> 

по вышеуказанному коду я могу получить предварительный просмотр. теперь как часть требования по отправке формы мне нужно отправить поля формы, а также изображение для этого, я беру код байта, присутствующий в атрибуте «src» тега изображения, и отправляю его с значениями поля с помощью ajax

Ajax форма отправить

function saveCatalogueForm(){ 

     var catalogValue = $("#catalogueForm").serialize(); 
     var imageInByte =$('#imagePreview').attr('src'); 

     /* console.log(fd) */ 
     $.ajax({ 
      type: "POST", 
      dataType : "json", 
      url:"../catalogue/create.action?catalogValue="+catalogValue+"&fd="+imageInByte, 
      success:function(response){ 
       alert("Submited Successfully"); 
      } 
     }); 
    } 

это мой контроллер

@RequestMapping(value="/catalogue/create.action", method=RequestMethod.POST) 
    public @ResponseBody Long create(CatalogueBase catalogueForm,byte[] fd) throws Exception { 

     Long parentId = null; 

     System.out.println(fd); 


       // some logic goes hear 



     return parentId; 
    } 

то, что я хотел.

приведенный выше код работает отлично для менее kb изображений, подобных bellow 3-6 kb, не более того, если я отправил больше, чем тогда, то я получу ошибку с ошибкой 400 (я увеличил размер POST до 2mb в apache server.xml страница) ...?

Я делаю способ записи или любым другим способом я могу отправить изображение через ajax ...?

любая помощь будет присвоено, спасибо

Answer 1

Я предполагаю, что здесь, но это, кажется, вы добавления данных изображения к URL, и вы получаете аромат «запроса URI слишком длинный» ошибки.

У вас могут возникнуть дополнительные проблемы, поскольку данные изображения не экранированы.

Попробуйте отправить данные в виде POST данных:

function saveCatalogueForm(){ 

    var catalogValue = $("#catalogueForm").serialize(); 
    var imageInByte = encodeURIComponent($('#imagePreview').attr('src')); 

    /* console.log(fd) */ 
    $.ajax({ 
     type: "POST", 
     dataType : "json", 
     data: "catalogValue="+catalogValue+"&fd="+imageInByte, 
     url:"../catalogue/create.action", 
     success:function(response){ 
      alert("Submited Successfully"); 
     } 
    }); 
}