时间戳

首页 > 解决方案 > 图片上传后页面刷新

php - 图片上传后页面刷新

问题描述

上传图片后，我的页面会刷新，但我不知道如何阻止这种情况发生。我有e.preventDefault()。

我知道这可能与这条线有关

if(in_array($ext, $allowed) && move_uploaded_file($temp, 'uploads/'.$name))

这是我的代码

$(document).ready(function(){
    var dropZone = document.getElementById('drop-zone');

    $(".upload-area").on('drop', function(e){
        e.preventDefault();

        var files_list = e.originalEvent.dataTransfer.files;
        var formData  = new FormData(); 

        for(i = 0; i < files_list.length; i++){
            formData.append('file[]', files_list[i]);
        }

        uploadData(formData);


        dropZone.ondragover = function(e){
            return false;
        }

        dropZone.ondragleave = function(e){
            return false;
        }
});

function uploadData(formdata){

    $.ajax({
        url: 'upload.php',
        type: 'post',
        data: formdata,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function(response){
            addThumbnail(response);
        }
    });
}

function addThumbnail(data){
    var len = $("#uploadfile div.thumbnail").length;

    var num = Number(len);
    num = num + 1;
    var src = data.src;

    // console.log(len);
    $("#thumbnail_"+num).append('<img src="'+src+'" width="100%" height="78%">');
}

我的上传.php

$allowed = ['png', 'jpg'];

foreach($_FILES['file']['name'] as $key => $name)
{
    $temp = $_FILES['file']['tmp_name'][$key];

    $ext = explode('.', $name);
    $ext = strtolower(end($ext));

    if(in_array($ext, $allowed) && move_uploaded_file($temp, 'uploads/'.$name))
    {
        $return_arr = array("name" => $filename,"size" => $filesize);
    }
    echo json_encode($return_arr);

}

我的 index.php

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="files[]" id="file" multiple>

  <!-- Drag and Drop container-->
  <div class="upload-area"  id="drop-zone">
    <h1>Drag and Drop file here<br/>Or<br/>Click to select file</h1>
  </div>
</form>

标签： phpjquery

解决方案

将提交按钮置于隐藏格式。请按照以下步骤操作。

在 HTML 中，

<input type="submit" id="submitBtn" style="display:none;">

在 Javascript 中，

function submitMe() {
  $("#submitBtn").trigger("click");
}


$(".upload-area").on('drop', function(e){
     ----
     ----
     submitMe(); 

});

推荐阅读