Custom the file up loader using pure jQuery

Question

Currently I am working on file uploading using pure jquery with out any plugins. I need to upload only Jpeg and I need to view in the same container, i need to delete the image once the image is loaded. Initially my delete was hide because I have not uploaded any image.

Here is my current code

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

Here is my Jquery code

    $(function () {
    $("#btn_del").hide();
    $(".upload").on("change", function()
     {
    var name = file.name;
    var size = file.size;
    var type = file.type;
    var files = !!this.files ? this.files : [];

    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+")");
        }
    }
});

});

Actually I cannot able to see image in the contianer and I am not getting the delete button though. Acutally I have set the variable for the type But I have confused where i need to give the file type and how to check.

Kindly guide me

Here is the fiddle Link

Kindly help me

score 1 · Answer 1 · answered Aug 25 '15 at 19:12

1

Bind the change event on your file input

$(".upload").on("change", function()...

http://jsfiddle.net/w7oma05h/1/

answered Aug 25 '15 at 19:12

eaCe

199
6

hi @eace thanks for the effort but when ever i am uploading the image the image size also needs to reduce as per the container size and more can you please help me to enable the delete button once image upload if i click delete button the image also needs to delete – Mr.M Aug 25 '15 at 19:14
sure, here is the new fiddle - image size & button http://jsfiddle.net/w7oma05h/3/ i never actually get the reset function to work, but have a look at this link http://stackoverflow.com/a/1043969/4964433 – eaCe Aug 25 '15 at 19:30
1

@eaCe As this is a follow-up question as comment, I won't post this as an answer as you already gave the correct answer - I've just adjusted the Fiddle to remove the image and set the delete-button to `display: none` again: http://jsfiddle.net/w7oma05h/4/ – matthias_h Aug 25 '15 at 20:03

Custom the file up loader using pure jQuery

1 Answers1