需要修復文件上傳後停止頁面重新加載

我想將文件上載到服務器而不刷新頁面。上傳工作，但上傳完成後，頁面重新加載，這是不是我想要的。我正在重定向到一個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） –

需要修復文件上傳後停止頁面重新加載

回答

相關問題