图像未上传到目录中

I have an option to upload images with caption for every table and there can be any number of tables.

I am using the script below but alert('qwert') does not popup but instead alert('asdf') popsup.Any ideas?

PHP file1:

<form  method='post' enctype='multipart/form-data' class='MyUploadForm'>
                    <input name='ImageFile' class='imageInput' id='imageInput' type='file'>
                    <input class='form-control dsa addcaption' name='addcaption' placeholder='Add caption' type='text' >
                    <input type='submit'  class='btn-custom5' value='Upload' >
                    <button class='btn btn-custom4 imageuploading' name='imageuploading' style='visibility:hidden' value='$x' ></button>//$x will specify path
                    </form>
                    <div class='output'></div>

AJAX:

$(document).ready(function() { 
    var options = { 
            target:   '.output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            success:       afterSuccess,  // post-submit callback 
            resetForm: true        // reset the form after successful submit 
        }; 

     $('.MyUploadForm').submit(function() { 
            $(this).ajaxSubmit(options); 
            return false; 
        }); 

}); 


function beforeSubmit(){
 alert('qwert');
//code to check conditions for file type and size
}

PHP file2:

if(isset($_POST))
{
    //check if this is an ajax request
    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
        die("<script> alert('asdf')</script>");
    }
}

$(document).ready(function() {

var request = $.ajax({
    url: $('.MyUploadForm').attr('action'),
    type: "POST",
    dataType: "html",
    target:   '.output',   // (Not sure about this) target element(s) to be updated with server response
    beforeSend:  beforeSubmit,  // pre-submit callback 
    success:       afterSuccess,  // post-submit callback 
    resetForm: true        // reset the form after successful submit 
}); 

function beforeSubmit(){
   alert('qwert');
   //code to check conditions for file type and size
}

Hopefully, I'm right. You can check the jQuery.ajax API for more.

EDIT:

I'm not sure about target. Maybe you should set the targets in success callback.

You are using a plugin. Are you sure you have installed this plugin in your page?

If yes, You cannot trigger the submit event in your form or your ajaxSubmit will never execute, check the button click instead...

Aditionally, Be sure you're providing a afterSuccess function :

$(document).ready(function() { 
    var options = { 
            target:   '.output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            success:       afterSuccess,  // post-submit callback 
            resetForm: true        // reset the form after successful submit 
        }; 

     $('.btn-custom5').click(function() { 
            $(this).ajaxSubmit(options); 
            return false; 
        }); 
    function beforeSubmit(){
     alert('qwert');
    }
    function afterSuccess(){
     alert('asdfg');
    }
}); 

If you're still getting errors after that, I suggest you to read the file upload examples in the plugin homepage