title: How To Rename File Name on Uploading An Image Using jQuery
body: <p>Can you please take a look at this demo and let me know how I can rename uploaded image name before sending to server?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function (e) {
      $("#uploadimage").on('submit', (function (e) {
          e.preventDefault();
          $("#message").empty();
          $('#loading').show();
          $.ajax({
              url: "ajax_php_file.php", // Url to which the request is send
              type: "POST", // Type of request to be send, called as method
              data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
              contentType: false, // The content type used when sending data to the server.
              cache: false, // To unable request pages to be cached
              processData: false, // To send DOMDocument or non processed data file it is set to false
              success: function (data) // A function to be called if request succeeds
              {
                  $('#loading').hide();
                  $("#message").html(data);
              }
          });
      }));
  
      // Function to preview image after validation
      $(function () {
          $("#file").change(function () {
              $("#message").empty(); // To remove the previous error message
              var file = this.files[0];
              var imagefile = file.type;
              var match = ["image/jpeg", "image/png", "image/jpg"];
              if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
                  $('#previewing').attr('src', 'noimage.png');
                  $("#message").html("&lt;p id='error'&gt;Please Select A valid Image File&lt;/p&gt;" + "&lt;h4&gt;Note&lt;/h4&gt;" + "&lt;span id='error_message'&gt;Only jpeg, jpg and png Images type allowed&lt;/span&gt;");
                  return false;
              } else {
                  var reader = new FileReader();
                  reader.onload = imageIsLoaded;
                  reader.readAsDataURL(this.files[0]);
              }
          });
      });
  
      function imageIsLoaded(e) {
          $("#file").css("color", "green");
          $('#image_preview').css("display", "block");
          $('#previewing').attr('src', e.target.result);
          //                    $('#previewing').attr('width', '250px');
          //                    $('#previewing').attr('height', '230px');
      };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="uploadimage" action="" method="post" enctype="multipart/form-data"&gt;
      &lt;div id="image_spreview"&gt;
          &lt;img id="previewing" src="" class="img-thumbnail img-responsive" alt="Responsive image" /&gt;
      &lt;/div&gt;
      &lt;div class="row" style="margin-top: 10px;"&gt;
              &lt;input class="btn btn-default btn-sm" type="file" name="file" id="file" required /&gt;
      &lt;/div&gt;
      &lt;!-- Start of Uploader--&gt;
      &lt;input type="submit" value="Upload" class="submit" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>