0

モーダルフォームから画像をアップロードする際に問題が発生しました。アップロードボタンをクリックした後、モーダルフォームが閉じ、モーダルが閉じたために何が起こるかわかりません。フォルダ内にアップロードされたファイルを期待していますが、 。アップロードボタンをクリックすると、アップロードされた画像がモーダル形式で自動的に表示されることを期待しています。コードに何かが欠けているのでしょうか。

これが私が使用する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!";
}
?>
4

1 に答える 1

1

ajax送信を介して単純なフォームのアップロードを行うことはできません。jqueryフォーム送信のようなものを使用する必要があります

利用方法：

$(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); 
});

さらなるカスタマイズ/変更については、この例を参照できます

于 2012-09-23T05:11:55.567 に答える