jquery ajax upload image

1$(document).ready(function(){
2
3    $("#but_upload").click(function(){
4
5        var fd = new FormData();
6        var files = $('#file')[0].files[0];
7        fd.append('file',files);
8
9        $.ajax({
10            url: 'upload.php',
11            type: 'post',
12            data: fd,
13            contentType: false,
14            processData: false,
15            success: function(response){
16                if(response != 0){
17                    $("#img").attr("src",response); 
18                    $(".preview img").show(); // Display image element
19                }else{
20                    alert('file not uploaded');
21                }
22            },
23        });
24    });
25});

1       $(function() {
2            $("#imagepicker").change(function(e) {
3                e.preventDefault();
4                var file_data = $(this).prop('files')[0];
5                var form_data = new FormData();
6
7                form_data.append('file', file_data);
8                form_data.append('action', 'ajax_image_upload');
9
10                $.ajax({
11                    url: 'upload.php',
12                    type: 'post',
13                    contentType: false,
14                    processData: false,
15                    data: form_data,
16                    success: function(response) {
17                        console.log(response);
18
19                    },
20                    error: function(response) {
21                        console.error(response.responseText);
22                    }
23
24                });
25            });
26        });

1var form = new FormData();
2form.append('varName','data');
3$.ajax({
4  type:'POST',
5  url: $(this).attr('action'),
6  data:formData,
7  cache:false,
8  contentType: false,
9  processData: false,
10  success:function(data){
11    //function here
12  },
13  error: function(data){
14    //function here
15  }
16});