title: How to save an image to another folder using ajax and jquery
body: <p>i have registration form (Spring mvc application) which having some fields as well as image upload option, i am sending fields value to controller using ajax through serialize() function </p>
  
  <p>now i want to send image through same request, and what ever the image selected by user that should be previewed by user before sending the request to controller. so for the preview, i am converting selected image to byte code and adding that to 'src' attribute of image tag </p>
  
  <p>Jquery For Preview of image</p>
  
  <pre><code>function readURL(input) {
              if (input.files &amp;&amp; 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);
  
          });
  </code></pre>
  
  <p>HTML image and input tag</p>
  
  <pre><code>&lt;input name=file type="file" id="imgInput"&gt;&lt;/input&gt;
  &lt;img id="imagePreview" src="" alt="Item Image" width="96" height="80"/&gt;
  </code></pre>
  
  <p>by the above code i able to get preview. now as a part of the requirement on submitting of form i need to send form fields as well as image for that i am taking the byte code present in 'src' attribute of image tag and sending that with field values by using ajax</p>
  
  <p>Ajax form submit</p>
  
  <pre><code>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+"&amp;fd="+imageInByte,
              success:function(response){
                  alert("Submited Successfully");
              }
          });
      }
  </code></pre>
  
  <p>this is my controller</p>
  
  <pre><code>@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;
      }
  </code></pre>
  
  <p>what i wanted.</p>
  
  <p>the above code work fine for less kb of images like bellow 3-6 kb not more than that if i sent more than that then i will get bad response 400 error (i increased POST size to 2mb in apache server.xml page )...? </p>
  
  <p>is i am doing write way or through any another way can i send image through ajax ...?</p>
  
  <p>any help will be appropriated, Thanks </p>