<tr> 用于 Ajax 文件上传的包装表单内部

Question

>我正在为表格中的editing/updating/inserting制作一个简单的程序，其中包含具有产品名称，价格和图像列的表格。我面临的问题是使用ajax上传文件(如何使用表单数据对象使用 ajax 将数据发送到 PHP 文件(。我试图包装在表单中但不起作用(任何替代方案(。

动态 PHP 代码

<form method="post" id="form'.$value['id'].'">
<tr class="jsgrid-filter-row" id="'.$value['id'].'">
<td class="jsgrid-cell" style="width: 163px"; id="lOcolumn'.$value['id'].'" >'.$value['productname'].'</td>
<td class="jsgrid-cell"  style="width: 100px"; id="accolumn'.$value['id'].'" >'.$value['price'].'</td>
<td class="jsgrid-cell" style="width: 100px"; id="cocolumn'.$value['id'].'" >'.$array[$value['productcategory']-1].'</td>
<td class="jsgrid-cell jsgrid-align-center" id="imagecolumn'.$value['id'].'" style="width: 100px;""><a target="_blank" href="./user/'.$value['imagelink'].'" id="image'.$value['id'].'">image '.$value['id'].'</td>
<td class="jsgrid-cell jsgrid-control-field jsgrid-align-center" style="width: 50px;" id="inputedit'.$value['id'].'"><input class="jsgrid-button jsgrid-edit-button editButtonClass" id="editButtonn'.$value['id'].'" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button deleteButtonClass" type="button" title="Delete" id="deleteButton'.$value['id'].'"></td>
</tr>
</form>

Answer 1

$("form").submit(function(evt){  
evt.preventDefault();
var formData = new FormData($(this));
$.ajax({
url: 'fileUploadUrl',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});

请尝试上面的代码。 使用 jquery 进行文件上传。

Answer 2

使用js/jquery 获取相关值并通过 ajax 提交它们。 不能在表标记之间使用表单标记。 见下面的示例，

$('.btn_save').click(function(){
let id = $(this).attr('data-id'); //this is the id of row
let name = $(this).parent().parent().find('.name').val(); //this is the name of relavent row
let price = $(this).parent().parent().find('.price').val(); //this is the price of relavent row
//do your ajax here
alert(id);
alert(name);
alert(price);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="100%">
<tr>
<td><input class="name" type="text"></td>
<td><input class="price" type="text"></td>
<td>
<button data-id="1" class="btn_save">Save</button>
</td>
</tr>
<tr>
<td><input class="name" type="text"></td>
<td><input class="price" type="text"></td>
<td>
<button data-id="2" class="btn_save">Save</button>
</td>
</tr>
</table>