如何在不刷新頁面的情況下將文件與其他文本輸入一起上傳

我使用下面的代碼成功上傳文件而無需刷新頁面。我現在想要的是爲該文件的標題添加一個文本輸入字段，並添加一個textarea來描述該文件，但我很難做到這一點。它給我'未定義索引'錯誤。我應該在我的代碼中添加什麼來上傳文件，文本輸入和textarea？如何在不刷新頁面的情況下將文件與其他文本輸入一起上傳

HTML

<form action="trash_one.php" method="post" id="uploadForm"> 
    <div id="targetLayer">No Image</div> 
    <div id="uploadFormLayer"> 
    <label >Upload Image</label><br> 
    <input type="file" class="inputFile" name="userImage" id="userImage"> 
    <input type="submit" name="submit" class="btnSubmit"> 
</form> 
<div>

EXPECTED HTML FORM

文本輸入和textarea的加入

<form action="trash_one.php" method="post" id="uploadForm"> 
    <div id="targetLayer">No Image</div> 
    <div id="uploadFormLayer"> 
    <input type="text" name="img_name"> 
    <label >Upload Image</label><br> 
    <input type="file" class="inputFile" name="userImage" id="userImage"> 
    <textarea name="description" ></textarea> 
    <input type="submit" name="submit" class="btnSubmit"> 
</form> 
<div>

JAVASCRIPT

$(document).ready(function(e) { 
    $("#uploadForm").on('submit',(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "trash_one.php", 
     type: "POST", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(data){ 
      $("#targetLayer").html(data); 
     }, 
     error: function(){ 
     } 
    }); 
})); 
});

PHP

這個腳本只上傳文件

if(is_array($_FILES)){ 
    if(is_uploaded_file($_FILES['userImage']['tmp_name'])){ 
     $sourcePath = $_FILES['userImage']['tmp_name']; 
     $targetPath = "imagess/".$_FILES['userImage']['name']; 
     if(move_uploaded_file($sourcePath,$targetPath)){ 
     ?> 
     <img src="<?php echo $targetPath; ?>" width="100px" height="100px" /> 
     <?php 
     } 
    } 
}

來源

2017-09-24 Oponjous

你的代碼爲我工作，嘗試'print_r（$ _ POST）;'它應該告訴你，你的數據已經通過。 – MinistryofChaps

當然我的代碼有效。我想要做的是將一個文本輸入字段和textarea添加到表單。如果我添加這些字段，我應該對我的PHP腳本和JavaScript進行哪些修改以便上傳所有數據？ – Oponjous

所以你有文件數據存儲工作，只需通過'$ _POST'獲取其他數據。所以'$ name = $ _POST ['img_name']; $ description = $ _POST ['description'];'。 – MinistryofChaps

你的代碼已經工作就像你想。只要看看$_POST陣列而不是$_FILES陣列。後數組包含所有文本字段內容。文件數組包含上傳的文件。

來源

2017-09-24 22:42:26

如何在不刷新頁面的情況下將文件與其他文本輸入一起上傳

回答

相關問題