实时表格编辑不仅适用于文本框

Question

我的问题是关于 PHP/mysql 表的。我需要我可以在点击 html 表时更改 mysql 表中的数据。 然后我使用 Live Table Edit 来满足我的需要，并且该代码非常适合文本框输入，但是如果我想应用该代码来上传图像和单选按钮，我将无法更改 js 代码以将 var 提供给 mysql询问。我试图更好地解释。我已经：

<pre><td class="edit_td">
                    <img id="col_1_id_<?php echo $val0; ?>" class="text" src='data:image/jpg;base64,<?php echo $val1; ?>' width='60px'/>
                    <!--?php echo $val1; ?-->
                    <form enctype="multipart/form-data">
                        <input id="input_col_1_id_<?php echo $val0; ?>" type="file" 
                        style="width: 80px;"/>
                    </form>
                </td></pre>

用于上传图片和

    <pre><td class="edit_td">
                    <span id="col_13_id_<?php echo $val0; ?>" class="text"><?php echo $val13; ?></span>
                    <form id="input13" method="post" style="align:left; display:none;">
                        <input name="radio13" type="radio" value="SI"> SI
                        <br>
                        <input name="radio13" type="radio" value="NO" checked> NO
                    </form>
                </td></pre>

单选按钮是/否。 然后我想使用该 ajax/js 代码将数据发送到 mysql 查询：

$(document).ready(function(){
	$(".edit_tr").click(function(){
		var ID = $(this).attr('id');
		
		$("#col_1_id_"+ID).hide();
		$("#col_2_id_"+ID).hide();
		$("#col_3_id_"+ID).hide();
		$("#col_4_id_"+ID).hide();
		$("#col_5_id_"+ID).hide();
		$("#col_6_id_"+ID).hide();
		$("#col_8_id_"+ID).hide();
		$("#col_10_id_"+ID).hide();
		$("#col_14_id_"+ID).hide();
		
		$("#input_col_1_id_"+ID).show();
		$("#input_col_2_id_"+ID).show();
		$("#input_col_3_id_"+ID).show();
		$("#input_col_4_id_"+ID).show();
		$("#input_col_5_id_"+ID).show();
		$("#input_col_6_id_"+ID).show();
		$("#input_col_8_id_"+ID).show();
		$("#input_col_10_id_"+ID).show();
		$("#input_col_14_id_"+ID).show();
		
	}).change(function(){
		var ID = $(this).attr('id');
		
		var var1="data:image/gif;base64,"+"/9j/4AAQSk....."
		//document.getElementById("#input_col_1_id_"+ID).src;
		var var2=$("#input_col_2_id_"+ID).val();
		var var3=$("#input_col_3_id_"+ID).val();
		var var4=$("#input_col_4_id_"+ID).val();
		var var5=$("#input_col_5_id_"+ID).val();
		var var6=$("#input_col_6_id_"+ID).val();
		var var8=$("#input_col_8_id_"+ID).val();
		var var10=$("#input_col_10_id_"+ID).val();
		var var14=$("#input_col_14_id_"+ID).val();
		
		var dataString = 
			'val0='+ ID 
			+'&val1='+var1
			+'&val2='+var2
			+'&val3='+var3
			+'&val4='+var4
			+'&val5='+var5
			+'&val6='+var6
			+'&val8='+var8
			+'&val10='+var10
			+'&val14='+var14
		;
			
		$("#col_2_id_"+ID).html('<img src="./img/load.gif" />'); // Loading image

		//definiamo quali campi sono obbligatori e li inviamo a mysql
		if(
			//var1.length>0&& 
			var2.length>0
			//&&var3.length>0 
			//&&var4.length>0 
			&&var5.length>0
			&&var6.length>0 
			&&var8.length>0
			&&var10.length>0
			//&&var14.length>0
		){
			$.ajax({
				type: "POST",
				url: "query_update.php",
				data: dataString,
				cache: false,
				//visualizza a video i cambiamenti
				//vanno messi tutti i campi variabili
				success: function(html)	{
					$("#col_1_id_"+ID).html('<img src=var1 />');
					$("#col_2_id_"+ID).html(var2);
					$("#col_3_id_"+ID).html(var3);
					$("#col_4_id_"+ID).html(var4);
					$("#col_5_id_"+ID).html(var5);
					$("#col_6_id_"+ID).html(var6);
					$("#col_8_id_"+ID).html(var8);
					$("#col_10_id_"+ID).html(var10);
					$("#col_14_id_"+ID).html(var14);
				}
			});
		}else{
			alert('Immettere tutti i dati obbligatori...');
		}

	});

	// Edit input box click action
	$(".editbox").mouseup(function(){
		return false
	});

	// Outside click action
	$(document).mouseup(function(){
		$(".editbox").hide();
		$(".text").show();
	});

});

那么，我需要对该代码进行哪些更改才能使用收音机和上传 img 功能？ 实在看不懂怎么修改那个js代码。

Answer 1

根据 XHR2，formdata 对象可以通过 AJAX 上传文件。代码修改如下

var dataString = new FormData();
dataString.append("userfile", $("input[type=file]")[0].files[0]);
dataString.append("val0", ID);
dataString.append("val2", var2);
dataString.append("val3", var3);
.
.
.

但这在现代浏览器中被接受，例如 IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+