フォームに入力されていないファイルをphpとajaxでアップロード

Question

私はデータを持つテーブルを持っています。各行の最後には編集ボタンがあります。私はそれをクリックすると、javascriptを介して、この行のすべての列をテキスト領域に変更し、ユーザーは値を編集できます。保存ボタンが表示され、ユーザーがクリックすると、データはajaxからsqlデータベースに保存されます。

これは正常に動作しますが、ファイルのアップロードに余分な列を追加したいので、ファイルをajax経由でphpファイルに取得できません。ここに私のコードは次のとおりです。

HTMLのCODE：

<table id="myTable"> 
<thead> 
<tr> 
<th>Title</th> 
<th>Name</th> 
<th>Image</th> 
<th colspan="3">Actions</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td id="1" class="update" data-id="1" data-column="title">Mr</td> 
<td id="lastname_val1" class="update" data-id="1" data-column="last_name">Doe</td> 
<td id="image_val1" class="update" data-id="1" data-column="image"><img src="mypic.png" id="imgsrc_1"></td> 
<td id="edit1"><input type="button" class="edit_button" id="edit_button1" value="edit" onclick="edit_row(1);"></td> 
<td id="save1"><input type="button" class="save_button" id="save_button1" value="save" onclick="save_row(1);"></td> 
</tr> 
</tbody> 
</table> 

JAVASCRIPT CODE：

<script type="text/javascript"> 
function edit_row(id) 
{ 
var lastname=document.getElementById("lastname_val"+id).innerHTML; 
var photo=document.getElementById("image_val"+id).innerHTML; 
var title=document.getElementById("title_val"+id).innerHTML; 


document.getElementById("lastname_val"+id).innerHTML="<input type='text' id='lastname_text"+id+"' value='"+lastname+"' >"; 
document.getElementById("title_val"+id).innerHTML="<input type='text' id='title_text"+id+"' value='"+title+"' >"; 
document.getElementById("image_val"+id).innerHTML="<input type='file' id='image_text"+id+"' name='imgInp_"+id+"' style='display:none;' />"+document.getElementById("image_val"+id).innerHTML; 
$('input#image_text'+id).attr('value', $('#invpiceditimg_'+id).attr('src')); 

document.getElementById("edit_button"+id).style.display="none"; 
document.getElementById("save_button"+id).style.display="block"; 

} 

function save_row(id) { 
var fd = new FormData(); 
var file = $("#img_text"+id)[0].files[0]; 
fd.append("lastname", document.getElementById("lastname_val"+id).innerHTML); 
fd.append("id", id); 
fd.append("myfile", file); 
fd.append("photopath", document.getElementById("image_text"+id).value); 

$.ajax 
    ({ 
     type:'post', 
     url:'imagechg.php', 
     data: fd, 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(response) { 
     console.log(response); 
     } 
    }); 
    </script> 

PHP CODE（imgchg.php）：

今

<?php 
    $lastname = test_input($_POST['lastname']); 
    $id= test_input($_POST['id']); 
    $photopath= $_POST['photopath']; 

    $uploaddir = realpath(dirname(__FILE__))."\\img\\upload_pics\\"; 
    $uploadfile = $uploaddir . basename($_FILES["myfile"]["name"]); 
    $check = getimagesize($_FILES["myfile"]["tmp_name"]); 

    $newfilename = $lastname.$id; 

    if($_FILES["myfile"]["tmp_name"] != "") { 
    move_uploaded_file($_FILES["myfile"]["tmp_name"], $uploaddir . $newfilename); 
?> 

、私がしようとした場合ajaxを介して投稿されたエコー変数は、通常のように表示されますが、$ uploadfileをエコーし​​ようとすると空白の値を取得し、もちろんファイルはbeiではありませんアップロードされました。

Answer 1

私はあなたのコードを実行さ

、そこにエラーコンソールで のindex.html：24キャッチされない例外TypeError：私は、ID =「img_text」とのコード要素に表示されていない未定義

のプロパティ「ファイル」を読み取ることができませんが、私id = "image_text"の要素を見ることができます $（ "＃img_text" + id）を$（ "＃image_text" + id）に変更しようとします