提交表單並刷新DIV，而頁面刷新不起作用？

Question

請注意，這不是重復的問題。 這個問題涉及提交表單並在更改事件（而非單擊事件）上刷新div。 僅供參考。

我有一個表格，允許用戶上傳圖像。 我刪除了“提交”按鈕，並添加了一個有關更改事件的JavaScript，以在用戶輸入圖像時自動提交表單。

這可以正常工作，並且圖像已上傳。

但是，我也正在瀏覽圖像以將其顯示給用戶。 目前，用戶直到刷新頁面或者有時甚至直到清除緩存才看到圖像更改。

包含圖像的div應該在提交表單時刷新，頁面本身也不應該刷新。 目前div尚未刷新，我認為表單正在提交和刷新頁面。

請有人能告訴我我要去哪里錯嗎？ 謝謝

碼：

<!-- Commence Photo Upload A -->
<?php
if(isset($_FILES['image6'])){
      $dir = $image .'/F/';
      $file_name = $_FILES['image6']['name'];
      $file_name = $dir. 'sub_img.jpg';
      $file_size = $_FILES['image6']['size'];
      $file_tmp = $_FILES['image6']['tmp_name'];
      $file_type = $_FILES['image6']['type'];
      $tmp = explode('.',$_FILES['image6']['name']);
      $file_ext=strtolower(end($tmp));
      $extensions= array("jpeg","jpg","png","gif");

      if(in_array($file_ext,$extensions)=== false){
         $errors[]="extension not allowed, please choose a GIF, JPEG or PNG file.";
      }

      if($file_size > 2097152) {
         $errors[]='File size must be excately 2 MB';
      }

      if(empty($errors)==true) {
         move_uploaded_file($file_tmp, $file_name);
      }else{
      }} ?>


  <script> 
$('#uploads6').submit(function(){
        var data = $(this).serialize();

        $.ajax({
            url: "upload_6.php",
            type: "POST",
            data: data,
            success: function( data )
            {
               //here is the code I want to refresh the div(#container)
               $('.image6').html(data);

            },
            error: function(){
                alert('ERROR');
            }
        });

        return false;
    });
</script> 


      <form id="uploads6" action = "" method = "POST" enctype = "multipart/form-data">
      <label class="profile_gallery_image_in"><input type="file" name="image6" id="image6" onchange="form.submit()"/><p class="label"></p><img class="myImg" src="<?php echo $image.'/F/sub_img.jpg'; ?>"  height="100%" width="100%" /></label>

      </form>

Answer 1

要優先提交默認表單，請嘗試：

e.preventDefault();

要停止事件冒泡，請嘗試：

e.stopPropagation();

另外，嘗試在HTML動作屬性中添加“＃”或“ javascript：void（0）”。

Answer 2

對於圖像緩存，您可以嘗試使用古老的“ cachebuster”方法。

所有這些都將唯一的內容放入url查詢中。

 www.example.com/image.jpg?cachebuster=somethingunique

瀏覽器會將其視為新請求，因為它不知道查詢字符串的作用，它可能是它關心的所有內容的搜索表單。 因此，它不會將其從緩存中拉出。

對於不固定的something unque好的選擇是任何基於時間的組件，因為您知道它從未使用過。 在進行圖像編輯之前，我使用過filesize($file) 。

$url = "www.example.com/image.jpg?cachebuster=".microtime(true); //as a float
$url = "www.example.com/image.jpg?cachebuster=".time(); // only 1 second granularity
$url = "www.example.com/image.jpg?cachebuster=".filesize($file); // based on the size of the file
$url = "www.example.com/image.jpg?cachebuster=".hash_file($file);  //based on file contents

等等。 如果願意，您甚至可以使用JavaScript進行操作。

對於表格

    $('#uploads6').submit(function(e){
          e.preventDefault();

          //.. other code

          return false;
    });

請注意，使用$.post可能會阻止您上傳文件。

這是關於此的另一個SO問題：

jQuery Ajax文件上傳

如果您希望以非JavaScript的方式上傳而不刷新頁面，則也可以通過iframe但onLoad甚至可能無法在Chrome中運行，因此很難確定何時從客戶端上傳文件。

這是我在2014年回答的一個特殊問題

如何異步上傳文件？

Answer 3

您需要使用

$('#uploads6').submit(function(e) {
e.preventDefault();
// your code
}

以防止將Submit事件定向到操作值中給定的頁面。 現在這是同一頁，因為action屬性的值是一個空字符串，因此頁面被刷新。