0

I want to upload mutiple image after click Upload Files! button not input change event below is my Jquery code (i download that code from here http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/)

index.html

<div id="main">
    <h1>Upload Your Images</h1>
    <form method="post" enctype="multipart/form-data"  action="upload.php">
    <input type="file" name="images" id="images" multiple />
    <button type="submit" id="btn">Upload Files!</button>
    </form>
</div>

upload.js

(function () {
    var input = document.getElementById("images"), 
        formdata = false;

    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
    }   

    if (window.FormData) {
        formdata = new FormData();
    //  document.getElementById("btn").style.display = "none";
    }

    button.addEventListener("click", function (evt) {
        document.getElementById("response").innerHTML = "Uploading . . ."
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }

        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res; 
                }
            });
        }
    }, false);
}());

1 Answer 1

3

index.html

<div id="main">
<h1>Upload Your Images</h1>
<form method="post" enctype="multipart/form-data"  action="upload.php">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>
</div>

upload.js

(function () {
    var input = document.getElementById("images"), 
        formdata = false;

    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
    }   

    if (window.FormData) {

            formdata = new FormData();
        formdata = new FormData();


        //document.getElementById("btn").style.display = "none";
    }

    $("#btn").click(function (evt) {


         evt.preventDefault();
        document.getElementById("response").innerHTML = "Uploading . . ."
        var i = 0, len = input.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = input.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }

        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res; 
                }
            });
        }
    }); 
}());
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for taking time to answer your own question. Could you also add some explanations so that I'll help others.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.