在ajax上传中未调用成功

Question

My script is an upload page which has a progress bar. The file is uploading correctly to the server and the progress bar is working. The on success isn't being executed though and I have no idea why. The console has no errors and the xhr response is "file moved do logic" so why isn't the success being called?

    <script type="text/javascript">
    $(document).ready(function() { 
    $('#progressbar').progress();

     $('#uploadForm').submit(function(e) {  

        //return Validate();    
        var ext = $('#userImage').val().split('.').pop().toLowerCase();
        if($.inArray(ext, ['gif','png','jpg','jpeg','pdf']) == -1) {
            alert('We only acccept PNG, JPG, JPEG, GIF or PDF files');
            return false; 
        }
        if($('#userImage').val()) {
            e.preventDefault();
            //$('#loader-icon').show();
            $(this).ajaxSubmit({ 
                target:   '#targetLayer', 
                beforeSubmit: function()
                 {
                  $("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){ 
                    $('#progressbar').progress({
                      percent: percentComplete
                    });
                    $('#progresslabel').html(percentComplete + '% Uploaded')
                },

                success:function (data){
                    alert (data);
                },
                resetForm: true 
            }); 
            return false; 
        }
    });
}); 
</script>
<div class="ui page grid">
    <div class="fifteen wide column">
        <div class="ui segment">
            <div class="upload">
                <h3>Upload <?php echo $pdf['UPLOADTITLE']; ?></h3>
                <form name="uploadform" id="uploadForm" action="upload.php" method="post">
                    <div>
                        <label>Upload Image File:</label>
                        <input name="userImage" id="userImage" type="file" class="demoInputBox" />
                    </div>
                    <div>
                        <input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" />
                    </div>
                    <input type="hidden" value="<?php echo $pdf['UPLOADSTUDENT']?>" name="studentid">
                    <input type="hidden" value="<?php echo $pdf['UPLOADTITLE'] ?>" name="filetype">
                    <input type="hidden" value="<?php echo $pdf['UPLOADID']; ?>" name="uploadid">
                </form>
            </div>
            <div class="ui teal progress" id="progressbar">
                <div class="bar"></div>
                <div class="label" id="progresslabel">0% Uploaded</div>
            </div>

        </div>
    </div>
</div>

Answer 1

The problem was with :

 target:   '#targetLayer', 

As soon as I removed this the onSuccess was called.