I'm looking for a plugin which allows adding multiple images, previewing, removing and submitting with some extra fields without ajax.

i have found some very good plugins like fineUploader and dropzone but they submit with ajax. with these plugins i haven't figured out how to submit without ajax.

I'm looking for a plugin which allows adding multiple images, previewing, removing and submitting with some extra fields without ajax.

i have found some very good plugins like fineUploader and dropzone but they submit with ajax. with these plugins i haven't figured out how to submit without ajax.

• javascript
• php
• image
• plugins

• Plugins for? What framework or programming language – Tim Hoeksema Commented Mar 28, 2017 at 12:49
• why you don't want ajax? You don't understand ajax? – Masivuye Cokile Commented Mar 28, 2017 at 12:58
• @MasivuyeCokile i dont want ajax bacause the images will be submitted to next page where i will get detail information regarding each image like its name, location etc – akmal saeed Commented Mar 28, 2017 at 13:08
• I can assist with the preview part, my only challenge is the remove part – Masivuye Cokile Commented Mar 28, 2017 at 13:08
• @MasivuyeCokile do you know about any plugin that provides the functionality? – akmal saeed Commented Mar 28, 2017 at 13:12

2 Answers 2

I'm looking for a plugin which allows adding multiple images, previewing, removing and submitting with some extra fields without ajax.

multiple images ----> <input type='file' id="myfiles" multiple="multiple" name="files[]">

previewing ---> Jquery

removing-----> Highly impossible to remove one by one image from file list,as the api is read only,however we can clear the entire file list, when the remove button is clicked.

without ajax ----> Just action the form to the controller/handler.

I don't think there's a way to achieve what you need beside using one of the plugins you have mentioned above.

You have 2 Options that I can think of currently.

1. use the multiple attribute on the file input type, then u can be able to use jquery to preview the images that are loaded but however we can not remove the image one by one from the filelist we can only remove the image from the preview but the server side still gonna process the image, or we can just clear the entire filelist, as I have mentioned above.

OR

1. we can add the file field dynamically using jquery, in this way we can be able to add one image add a time, then have an add more images button that will append a new file input to our form, with this we will be able to remove images one by one before processing in the server side.

Option 1

 $('document').ready(function() {
        var images = function(input, imgPreview) {
    
            if (input.files) {
                var filesAmount = input.files.length;
    
                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();
    
                    reader.onload = function(event) {
                        $($.parseHTML("<img class='pic'>")).attr('src', event.target.result).appendTo(imgPreview);
                    }
                    reader.readAsDataURL(input.files[i]);
                }
            }
    
        };
    
        $('#myimg').on('change', function() {
            images(this, '#previews');
        });
            
            //clear the file list when image is clicked
        $('body').on('click','img',function(){
            $('#myimg').val("");
            $('#previews').html("");
    
        });
    });

 img{
    cursor: pointer;
    }

<script
    src="https://code.jquery./jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

<form id="form1"  enctype="multipart/form-data" action="server.php" method="post">
    <input type='file' id="myimg" multiple="multiple">
    <div id="previews"></div>
        <p>&nbsp;</p>
    <button type="submit">Submit</button>
</form>

Option 2

var abc = 0;
        $('#add_more').click(function ()
            {
                $(this).before($("<div/>",{id: 'filediv'}).fadeIn('slow').append($("<input/>",
                            {
                                name: 'file[]',
                                type: 'file',
                                id: 'file'
                            }),
                            $("<br/><br/>")
                        ));
            });
        $('body').on('change', '#file', function ()
            {
                if (this.files && this.files[0])
                {
                    abc += 1; //increementing global variable by 1
                    var z = abc - 1;
                    var x = $(this)
                        .parent()
                        .find('#previewimg' + z).remove();
                    $(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                    $(this)
                        .hide();
                    $("#abcd" + abc).append($("<img/>",{
                                id: 'img',
                                src: 'x.png', //the remove icon
                                alt: 'delete'
                            }) .click(function ()
                            {
                                $(this)
                                    .parent()
                                    .parent()
                                    .remove();
                            }));
                }
            });
        //image preview
        function imageIsLoaded(e)
        {
            $('#previewimg' + abc)
                .attr('src', e.target.result);
        };

<script
    src="https://code.jquery./jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<form method="POST" action="server.php" enctype="multipart/form-data">
    <div class="col-md-3 col-sm-3 col-xs-3">
            <div id="filediv"><input name="file[]" type="file" id="file"/></div>
    <input type="button" id="add_more" class="btn btn-primary" value="Add More Files"/><br><br>
    
    <button type="submit" class="btn btn-success">Submit</button>
</form>

I believe this more esp option 2 can do the trick, select image, add more preview delete, then when u are happy hit the submit button then do your processing on the server. You might add styling to the preview images

Goodluck.

You can use DropzoneJS

They have a list of configurable options that you can find here. Dropzone JS Usage.

If you still need more customization then you will have to add your own code to it. Hope this helps you from writing thousand lines of code.

Without AJAX requests:

This may help you. Click here!