Add image dynamic and upload

   
     $(document).on("click", ".imagedataclass", function () {

        var data1 = $(this).attr('data1');
        var data2 = $(this).attr('data');
        var dataid = $(this).attr('dataid');

        $("#image" + dataid).attr("src", data2);
        $(this).attr("data", data1)
        $(this).attr("data1", data2)
        $(this).closest('li').toggleClass('imagese');
    })
    /***************************************************************************
     File Upload Section
     ***************************************************************************/
    $('.add_more').click(function (e) {
        //get autoincrement number
        var InputNum = $(this).attr("data");
        //increment number
        InputNum++
        /***increment data var button***/
        $(this).attr("data", InputNum);
        var miandiv = $("#mainDivImage");

        e.preventDefault();
        miandiv.append('<div id="BrowseBtnData' + InputNum + '" class="col-sm-2 pad_bot"><div id="browsemain' + InputNum + '" class="input-group pad_bot"> <input type="hidden" id="imageName' + InputNum + '" name="imagename[' + InputNum + ']"><span class="input-group-btn"><span class="btn btn-primary btn-sm btn-file">Browse&hellip; <input id="ImgId' + InputNum + '" type="file" data="' + InputNum + '" name="file[]"></span></span><input type="text" id="inputId' + InputNum + '" readonly> <div id="imageloadstatus' + InputNum + '" style="display:none"><img src="/common/loader.gif" alt="Uploading...."/></div></div><div class="row_dv " id="ImageDiv' + InputNum + '" style="display:none"><div class="rltv"><span class="close_overlay"> <a class="close_ic fa fa-times-circle-o fa-3x deleteimg" data="BrowseBtnData' + InputNum + '"></a> </span><image width="185" height="150" src=""  id="imageTag' + InputNum + '"></div><div class="row_dv"><input value="' + InputNum + '" type="radio" name="default[]"> Make Default </div></div></div>');
    });

    /***************Get Image Preview***********/
    function readURL(input, num) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imageTag' + num).attr('src', e.target.result);
                $('#imageTag' + num).show()
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    /********************remove Image ***************/
    $("#mainDivImage").on('click', '.deleteimg', function () {
        var deleteId = $(this).attr("data");
        $("#mainDivImage #" + deleteId).remove();
    });


    /******************ajax upload file***************/
    $(document).delegate(':file', 'change', function () {
        //get file instance for show image
        var dataThisFile = this;
        //****get dynamic file Number id******/
        var filenum = $(this).attr('data');

        /*****check file size************/
        var file_size = $("#ImgId" + filenum)[0].files[0].size;
        if (file_size > 2097152) {
            alert("File size is greater than 2MB");
            return false;
        }

        /**********check image type ********/

        var ext = $("#ImgId" + filenum).val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');
            return false;
        }

        var oMyForm = new FormData();
        oMyForm.append("media", $("#ImgId" + filenum).prop("files")[0]);
        oMyForm.append("_token", "{{ csrf_token() }}");




        $.ajax({
            url: "uploadfile",
            data: oMyForm,
            processData: false,
            contentType: false,
            type: 'POST',
            dataType: 'json',
            beforeSend: function () {
                $(".add_more").prop("disabled", true);
                $("#imageloadstatus" + filenum).show();
                $("#inputId" + filenum).hide();
            },
            success: function (response) {
                if (response.error === 1) {
                    $("#inputId" + filenum).val("System recieve an error !");
                } else {
                    var label = $("#ImgId" + filenum).val().replace(/\\/g, '/').replace(/.*\//, '');
                    $("#inputId" + filenum).val(label);
                    $("#imageName" + filenum).val(response);
                    $("#browsemain" + filenum).hide();
                    $("#imageloadstatus" + filenum).hide();

                    $("#ImageDiv" + filenum).show();

                    readURL(dataThisFile, filenum);


                }

                $(".add_more").prop("disabled", false)
                $("#imageloadstatus" + filenum).hide();


            },
            error: function () {
                alert("unable to create the record");
                $(".add_more").prop("disabled", false)
                $("#imageloadstatus" + filenum).hide();


            }
        });
    });