Редактирование живого стола не только для текстовых полей

Question

Мой вопрос касается таблицы PHP/mysql. Мне нужно, чтобы я мог изменять данные в таблице mysql onclicking на html-таблице. Затем я использую 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> 

для радио-кнопки да/нет. Тогда я хочу, чтобы отправить данные в MySQL Query с помощью этого AJAX/JS код:

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

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

 
\t }); 
 

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

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

 
});

так, что мне нужно изменить на этот код, чтобы использовать радио и загрузить IMG функцию? Я действительно не могу понять, как изменить этот js-код.

Answer 1

Загрузка файла через AJAX возможна с formdata объектом согласно XHR2. Код должен быть изменен, как показано ниже

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+