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 File Upload

如果您希望通过非JavaScript方式上传而不刷新页面，也可以通过iframe来完成，但是onLoad甚至可能无法在Chrome中运行，因此很难确定何时文件是从客户端上传的。

这是我在2014年回答的一个特殊问题

How can I upload files asynchronously?

Answer 3

您需要使用

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

防止将Submit事件定向到操作值中给定的页面。现在，这是同一页，因为action属性的值是一个空字符串，因此页面被刷新。

提交表单并刷新DIV，而页面刷新不起作用？

3 个答案: