单击模态表单关闭的按钮后出现什么问题？

Question

我在从模态表单上传图像时遇到问题，单击上传按钮后，模态表单关闭，我不知道会发生什么，因为模态表单关闭并且在我的文件夹中我期待上传文件但是有非。我期望发生的是，在我单击上传按钮后，它会自动以模态形式显示上传的图像，我的代码是缺少什么还是什么？

这是我使用的 jquery 代码：

$(function() {
        $('button').button();
        $('.upload-profile-pic').click(function() {
            $.ajax({
                url: 'upload-image.php',
                method: 'post',
                data: { uploadedfile: $('.profile-pic-name').val().trim() },
                success: function(data) {
                    $('.new-profile-pic').html(data);
                }
            });
        })
        $('.update-profile-pic').click(function() {
            $('#dialog').dialog({
                width:350,
                modal:true
            });
        });
    });

这是我的html表单

<button class="update-profile-pic">Update Profile Picture</button>
<div id="dialog">
    <p class="new-profile-pic">

    </p>
    <form enctype="multipart/form-data">
        <input type="hidden" name="MAX_FILE_SIZE" value="100000">
        <input class="profile-pic-name" name="uploadedfile" type="file">
        <input class="upload-profile-pic" type="submit" name="upload" value="Upload File">
    </form>
<div>

这是我的 PHP 代码：

    <?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo '<img alt="" src="'.$target_path.'">';
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

Answer 1

您不能通过 ajax 提交进行简单的表单上传。你必须使用类似jquery form submit

用法：

$(document).ready(function() { 
    var options = { 
        target:        '#dialog',   // target element(s) to be updated with server response 
        url:   'url: 'upload-image.php',
        type:      'POST',
        resetForm: true        // reset the form after successful submit  
    }; 

    $('#dialog form').ajaxForm(options); 
}); 

您可以参考this 示例进行进一步的自定义/更改