0

I am uploading image with ajax and showing image before uploading with jquery. here is my html code

<form id="uploadimageS2" action="" method="post" enctype="multipart/form-data">
    <div id="image_previewS2"><img id="previewingS2" src="img/noimage.png" /></div> 
    <div id="selectImageS2">
        <label>Select Your Image</label><br/>
        <input type="file" name="fileS2" id="fileS2" required />

        <input type="submit" value="Upload" class="submit" />
    </div> 
</form>

then here is my jquery code

// Function to preview image

$("#fileS2").change(function() {
    $("#messageS2").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])))
    {
    $('#previewingS2').attr('src','img/noimage.png');
    $("#messageS2").html("<p id='errormsg'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
    return false;
    }
    else
    {
        var reader = new FileReader();  
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }       
});

function imageIsLoaded(e) { 
    $('#image_previewS2').css("display", "block");
    $('#previewingS2').attr('src', e.target.result);
    $('#previewingS2').attr('width', '250px');
    $('#previewingS2').attr('height', '230px');
};


reader.readAsDataURL(this.files[0]);
var file = this.files[0];

here i want to add another element instead of "this". because i am uploading 3 images in one page and when using this script it is going wired. i already tried 

 reader.readAsDataURL($(#uploadimageS2).files[0]);
 reader.readAsDataURL($(#fileS2).files[0]);

and those didn't work.

ashkufaraz
  • 4,730
  • 4
  • 46
  • 69
tharaka
  • 53
  • 10
  • upload 3 images with one file input or you have 3 file inputs? – Mohamed-Yousef Nov 29 '14 at 19:16
  • i have 3 file inputs im using bootstrap models to open each input – tharaka Nov 29 '14 at 19:17
  • ok if your code work for just 1 image. just use classess instead of ids and when using javascript classes is better cause id is unique for just one element – Mohamed-Yousef Nov 29 '14 at 19:19
  • ok i'll keep remember that in future projects. i have applied these input script for 6 places. this code working good and uploading images well. i want to fix just image preview part. this code is preview image when single script. but when going to 2nd input script, this image previews another input form. – tharaka Nov 29 '14 at 19:26
  • ok reference you preview img with the input using $(this) . like $(this).parent().parent().find('#previewingS2').attr('src','img/noimage.png'); and reference all your elements with its input – Mohamed-Yousef Nov 29 '14 at 19:32
  • $('#previewingS2').attr('src','img/noimage.png'); this line is for display no-image image before uploading file n it has no problem. i have problems with reader.readAsDataURL($(#uploadimageS2).files[0]); and reader.readAsDataURL($(#fileS2).files[0]); lines – tharaka Nov 29 '14 at 19:37
  • #uploadimageS2 is a form not a file input to get files from it – Mohamed-Yousef Nov 29 '14 at 20:01
  • hope it will help http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded – Mohamed-Yousef Nov 29 '14 at 20:14

0 Answers0