-4

Code:

<script type='text/javascript'>
            $(document).ready(function(){

                // Upload
                $("#but_upload").click(function(){

                    var fd = new FormData();
                    var files = $('#file')[0].files[0];
                    fd.append('file',files);
                    fd.append('request',1);

                    // AJAX request
                    $.ajax({
                        url: 'addremove.php',
                        type: 'post',
                        data: fd,
                        contentType: false,
                        processData: false,
                        success: function(response){

                            if(response != 0){
                                var count = $('.uploaded-images .image-content').length;
                                count = Number(count) + 1;

                                // Show image preview with Delete button
                                $('.uploaded-images').append("<div class='image-content' id='content_"+count+"' ><img class='image-responsive' src='"+response+"' width='125' height='125'><span class='delete' id='delete_"+count+"'>&times;</span><span class='under-approval'>Under Approval</span></div>");
                            }else{
                                alert('file not uploaded');
                            }
                        }
                    });
                });

                // Remove file
                $('.uploaded-images').on('click','.image-content .delete',function(){

                    var id = this.id;
                    var split_id = id.split('_');
                    var num = split_id[1];

                     // Get image source
                    var imgElement_src = $( '#content_'+num+' img' ).attr("src");

                    // AJAX request
                    $.ajax({
                       url: 'addremove.php',
                       type: 'post',
                       data: {path: imgElement_src,request: 2},
                       success: function(response){

                            // Remove <div >
                            if(response == 1){
                                $('#content_'+num).remove();
                            }

                       }
                    });
                });

            });
        </script>

This is my Questions:

  1. How do I automatically submit an upload form when a file is selected?
  2. how to replace upload button my code is below

Anyone who have experience in this field, please suggestion me any solution for this problem, thank you.

I am a Student
  • 1,570
  • 4
  • 21
  • 36
user9515436
  • 21
  • 3

2 Answers2

-1

You can use the following JQuery code:

$("#fileInput").change(function () {
    $('#form').submit();
});
Mike Kaharlykskiy
  • 91
  • 1
  • 2
  • 8
  • how to use? – user9515436 Mar 19 '18 at 09:28
  • @user9515436 you don't need submit() if you're put your ajax code in change event. – jcubic Mar 19 '18 at 09:31
  • its working but i have got another problem when uploading the images placing some where and delete/cancel button not working and more – – user9515436 Mar 19 '18 at 15:09
  • its working fine now – user9515436 Mar 19 '18 at 16:29
  • hi in this script width=125 height 125 css using it giving stretched thumbnail how to get rid of it! – user9515436 Mar 20 '18 at 12:45
-1

You can use this:

$('#file').on('change', function() {
    $("#but_upload").click();
});

or better just put your click code into change event.

$('#file').on('change', function() {
   var fd = new FormData();
   var files = this.files[0];
   ...
});
jcubic
  • 61,973
  • 54
  • 229
  • 402