單擊模式窗體關閉的按鈕後出現了什麼問題？

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例如用於進一步定製/更改