一千萬個為什麽

搜索

通過php和ajax上傳文件,不在表單內輸入

我有一個數據表。在每行的末尾,我有一個編輯按鈕。當我點擊它時,通過javascript我將這一行的所有列更改為文本區域,用戶可以編輯這些值。然後出現一個保存按鈕,如果用戶點擊它,數據通過ajax保存到sql數據庫。

這工作成功,但我想添加一個額外的列上傳文件,我不能通過Ajax文件到PHP文件。這是我的代碼:

HTML代碼:

<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"></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代碼:

<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發布的變量,我通常會看到它們,但如果我嘗試echo $ uploadfile,我會得到空白值,當然文件不會被上傳。

最佳答案

我執行了你的代碼,在控制臺出現錯誤 index.html:24 Uncaught TypeError:無法讀取未定義的屬性'文件'

我沒有在代碼元素中看到id =“img_text”,但我可以看到元素id =“image_text” 所以嘗試將$(“#img_text”+ id)更改為$(“#image_text”+ id)

轉載註明原文: 通過php和ajax上傳文件,不在表單內輸入