title: Multiple Image Upload using Ajax with Laravel 5.6
body: <p>First I want Apology for my eng. </p>
  
  <p>Second I don't want to use any plugin.</p>
  
  <p>I Want to upload Multiple image and I can do it without ajax, But I want to upload with Ajax.
  I Put my Code here.</p>
  
  <pre><code>&lt;form action="{{route('image-upload.store')}}" method="post" enctype="multipart/form-data"&gt;
     {{csrf_field()}}
     &lt;input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple&gt;  
  
    &lt;button type="submit"&gt;save&lt;/button&gt;
  &lt;/form&gt;                          
  </code></pre>
  
  <p>Controller : </p>
  
  <pre><code>if ($request-&gt;hasFile('image_upload')) {
          $images = $request-&gt;file('image_upload');
          foreach ($images as $image) {
              $randonName = rand(1, 200);
              $name = $image-&gt;getClientOriginalName();
              $storename = $randonName . '_' . $name;
              $image-&gt;move(public_path('images/test'), $storename);
          }
      }
  
  return redirect()-&gt;back();
  </code></pre>
  
  <p>Above Code simply upload multiple image without Ajax.</p>
  
  <p>Here Ajax :</p>
  
  <p>html :</p>
  
  <pre><code> &lt;input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple&gt;
  </code></pre>
  
  <p>Ajax :</p>
  
  <pre><code> $.ajaxSetup({
       headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
   });
  
  $('#image-upload').change(function () {
      event.preventDefault();
      let image_upload = new FormData();
      let TotalImages = $('#image-upload')[0].files.length;  //Total Images
      let images = $('#image-upload')[0];  
  
      for (let i = 0; i &lt; TotalImages; i++) {
          image_upload.append('images', images.files[i]);
      }
      image_upload.append('TotalImages', TotalImages);
  
      $.ajax({
          method: 'POST',
          url: '/image-upload',
          data: image_upload,
          contentType: false,
          processData: false,
          success: function (images) {
              console.log(`ok ${images}`)
          },
          error: function () {
            console.log(`Failed`)
          }
      })
  
  })
  </code></pre>
  
  <p>Controller :</p>
  
  <pre><code>  if ($request-&gt;images) {
          $images = $request-&gt;images;
          $total=$request-&gt;TotalImages;
          $imagesName = $images-&gt;getClientOriginalName();
         $randonName = rand(1, 200);
          $images-&gt;move(public_path('/images/test'), $randonName . '.jpg');
          return response()-&gt;json($randonName);
      }
  </code></pre>
  
  <p>Now This Code Work Fine but only for one image. I know that I Sould put it <code>Loop</code> and I did But didn't get my Response.</p>
  
  <p>So if anyone can tell me how do it?</p>
  
  <p>Here My Efforts :</p>
  
  <pre><code> if ($request-&gt;images) {
         $total=$request-&gt;TotalImages;
          $images = $request-&gt;images;
          for($j=0; $j&lt;$total;$j++){
              $imagesName = $images-&gt;getClientOriginalName();
              $randonName = rand(1, 200);
              $images-&gt;move(public_path('/images/test'), $randonName . '.jpg');
          }
          return response()-&gt;json($randonName);
      }
  
    if ($request-&gt;images) {
          $images = $request-&gt;images;
          foreach ($images as $image) {
              $imagesName = $images-&gt;getClientOriginalName();
              $randonName = rand(1, 200);
              $image-&gt;move(public_path('/images/test'),$randonName . $imagesName . $randonName . '.jpg');
          }
      }
  </code></pre>