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代码（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，我会得到空白值，当然文件没有被上传。

Answer 1

我执行了你的代码，控制台出错了 index.html：24未捕获的TypeError：无法读取未定义的属性“文件”

我没有在id =“img_text”的code元素中看到，但我可以看到id =“image_text”的元素所以尝试将$（“＃img_text”+ id）更改为$（“＃image_text”+ id）

通过php和ajax上传文件，输入不在表单内部

1 个答案: