需要修复文件上传后停止页面重新加载

我想将文件上载到服务器而不刷新页面。上传工作，但上传完成后，页面重新加载，这是不是我想要的。我正在重定向到一个iframe（“myFrame”）来停止页面重新加载，但它似乎无法正常工作。我做错了什么？需要修复文件上传后停止页面重新加载

HTML

<form id="upload" target="myFrame" action="sql/main-pix-upload.php" method="post" enctype="multipart/form-data"> 
    <input id="main-pix" class="hidden" name="main_pix" type="file" onchange="uploadPix()" accept="image/*"/> 
    <label class="gi gi-camera mb-0 text-white" for="main-pix" type="button" title="Change Picture"></label> 
</form> 
<iframe class="hidden" name="myFrame"></iframe>

SCRIPT

function uploadPix(){ 
    var form = document.getElementById('upload'); 
    form.onsubmit = function(e){ 
    e.preventDefault() 
    var formData = new FormData(this); 
    $.ajax({ 
     url: 'sql/main-pix-upload.php', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false 
    }) 
    }); 
};

PHP

$account = $_SESSION['account']; 
$order = $_SESSION['order']; 
$id = $_SESSION['id']; 

$pathPix = ('../accounts/'.$account.'/'.$order.'/pix/'.$id.'/'); 
if(!is_dir($pathPix)){ 
    mkdir($pathPix, 0777, true); 
} 

$file_name = $_FILES['main_pix']['name']; 
$file_size = $_FILES['main_pix']['size']; 
$extension = pathinfo($file_name, PATHINFO_EXTENSION); 
$new_name = "main-pix.png"; 
$temp = ($_FILES["main_pix"]["tmp_name"]); 
$target_file = ($pathPix.$new_name); 

if(0 < $_FILES['main_pix']['error']){ 
    echo 'Error: ' . $_FILES['main_pix']['error'] . '<br>'; 
}else{ 
    move_uploaded_file($temp, $target_file); 
}

来源

2017-08-01 ninjachuku

'onchange =“uploadPix（）”'不要使用内联JS。当搜索函数初始化文件时，你不应该在HTML中查找它（视图）。改为使用'addEventListener'。如果你真的想在HTML中留下一些提示，说明某些元素绑定了某些JS的东西，而不是你可以使用'data-onchange =“uploadPix”'，并且在JS中你可以将所有''[data-onchange] “'元素并检索指定的函数名称，如'myOnchangeMethods [this.dataset.onchange]（）' –

我把它拿出来，尝试了一切，但它没有工作。 – ninjachuku

要么使用：

form.onsubmit = function(e) { 
    e.preventDefault() 
};

或：

form.addEventListener("submit", function(e) { 
    e.preventDefault(); 
});

然后，您必须使用AJAX自己进行HTTP调用。

来源

2017-08-01 23:00:35

对不起 - >你可以显示这7行jQuery来执行这样的AJAX - 可能对OP有帮助吗？ –

我是根据你的意见编辑的，但它仍然不起作用。我的代码是否正确？查看修改。 – ninjachuku

文件上传不适用于默认的jQuery AJAX。你必须使用XMLHttpRequest。欲了解更多信息，请看这里：[MDN：使用XMLHttpRequest]（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files） –

需要修复文件上传后停止页面重新加载

回答

相关问题