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 +

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

1 个答案: