CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr.M
Mr.M

Reputation: 1480

Jquery photo upload accept only jpeg not working

Currently working on jQuery photo upload. First user has to upload only jpeg images. If he is upload any image other than jpeg format in the label message should say please upload only jpeg. Second When the image upload what ever the size it has to fit with the container. Third when the user upload the image can i able to upload this image into my database (MYSQL) 

$("#imageUploadForm").css("background-image", "none");
$("#btn_del").css("display", "none");

Here is my jQuery Code

    $(function () {
     $("#btn_del").hide();
      $(".upload").on("change", function()
         {
        var files = !!this.files ? this.files : [];
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
           if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (/^image/.test( files[0].type)){ // only image file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file

        $("#btn_del").show();

         $("#btn_del").on("click", function()
         {
            $("#imageUploadForm").css("background-image", "none");
             $("#btn_del").css("display", "none");
         });

        reader.onload = function(){ // set image data as background of div
            $("#imageUploadForm").css("background-image", "url("+this.result+")");
        }
    }
 });
 });

Here is my Fiddle Link

Upvotes: 2

Views: 588

Answers (1)

blex
blex

Reputation: 25634

#1 You have a regex expression, but you don't use it.

Replace if (/^image/.test( files[0].type)){

with if (regex.test( files[0].type)){

#2 Then, to show your error message, you can add an else and put this in there:

$('#error').text('Please upload only jpeg');

Don't forget to empty it when the user selects a JPEG file:

$('#error').text('');

#3 To make sure the image fits in your container, you can use:

#imageUploadForm {
    background-size: contain; /* Handy CSS3 property */
    background-repeat: no-repeat;
    background-position: center;
}

Updated JS Fiddle

Or try the demo below (same code)

$(function() {
  
  $("#btn_del").hide();
  $(".upload").on("change", function() {
    var files = !!this.files ? this.files : [];
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (regex.test(files[0].type)) { // only image file
      var reader = new FileReader(); // instance of the FileReader
      reader.readAsDataURL(files[0]); // read the local file

      $("#btn_del").show();

      $("#btn_del").on("click", function() {
        $("#imageUploadForm").css("background-image", "none");
        $("#btn_del").css("display", "none");
      });

      reader.onload = function() { // set image data as background of div
        $("#imageUploadForm").css("background-image", "url(" + this.result + ")");
        $('#error').text(''); // Empty the error message
      }
    } else {
      $('#error').text('Please upload only jpeg'); // Add an error message
    }
  });

});
#error{
    color:red;
}
.choose_file{
    position:relative;
    display:inline-block;    
    border:#ebebeb solid 1px;
    width:150px;
    height:150px;
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
	background:#f2f2f2;
}
.btn_del{
    width:80px;
    height:30px;
    background-color:darkGrey !important;
    border:none;
}
 input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:10px;
 }


#imageUploadForm
{
    background-size: contain; /* Handy CSS3 property */
    background-repeat: no-repeat;
    background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="choose_file" id="imageUploadForm">
  <span>Photo</span>
  <input name="Select File" class="upload" type="file" />
  <label id="error"></label>
</div>
<button id="btn_del" class="btn_del">Delete</button>

Upvotes: 2

Related Questions