duanmoen784988 2015-04-14 20:14
浏览 73

JQuery Ajax - 动态创建的输入元素希望能够使用Ajax提交上传

I have a jquery file that dynamically creates input elements. One of the elements is for uploading an image file. When the user clicks save it will add it to a database via ajax. I want the ability to be able to upload on the same save click. I am not able to get the file element to submit.

Below is my jquery:

var trcopy;
var editing = 0;
var tdediting = 0;
var editingtrid = 0;
var editingtdcol = 0;
var inputs = ':checked,:selected,:text,textarea,select,:hidden,:checkbox,:file';
var notHidden = ':checked,:selected,:text,textarea,select,:file';

$(document).ready(function(){

// set images for edit and delete 
$(".eimage").attr("src",editImage);
$(".dimage").attr("src",deleteImage);

  // init table
    blankrow = '<tr valign="top" class="inputform"><td></td>';
   for(i=0;i<columns.length;i++){
        // Create input element as per the definition
        //First elements in array are hidden fields
         if(columns[i] == '_fk_PO_Req_ID'){
               input = createInput(i,'');
              blankrow += input;
         }else{
             input = createInput(i,'');
             blankrow += '<td class="ajaxReq" style="text-   align:center;">'+input+'</td>';
         }
      }
      blankrow += '<td><a href="javascript:;" class="'+savebutton+'"><img  src="'+saveImage+'"></a></td></tr>';

   // append blank row at the end of table
    $("."+table).append(blankrow);


    // Add new record
    $("."+savebutton).on("click",function(){
 //     alert('save clicked');

        var validation = 0;

       var $inputs =
       $(document).find("."+table).find(inputs).filter(function() {
        // check if input element is blank ??
        //if($.trim( this.value ) == ""){
//              $(this).addClass("error");
//              validation = 0;
//          }else{
//              $(this).addClass("success");
//          }
        validation = 1;
        return $.trim( this.value );
    });

    var array = $inputs.map(function(){
        console.log(this.value);
        console.log(this);
        return this.value;
    }).get();

    var serialized = $inputs.serialize();
    alert(serialized);
    if(validation == 1){
        ajax(serialized,"save");
    }
});

createInput = function(i,str){
    str = typeof str !== 'undefined' ? str : null;
    //alert(str);
    if(inputType[i] == "text"){
    input = '<input class="input-small" type='+inputType[i]+' name="'+columns[i]+'" placeholder="'+placeholder[i]+'" value="'+str+'" >';
  }else if(inputType[i] == "file"){
    input = '<input class="input-small" type='+inputType[i]+' name="new_receipt" placeholder="'+placeholder[i]+'" value="'+str+'" >';
}else if(inputType[i] == "textarea"){
    input = '<textarea name="'+columns[i]+'" placeholder="'+placeholder[i]+'">'+str+'</textarea>';
}else if(inputType[i] == "hidden"){
    input = '<input type="'+inputType[i]+'" name="'+columns[i]+'" value="'+hiddenVal[i]+'" >';
}else if(inputType[i] == "checkbox"){
    input = '<input type="'+inputType[i]+'" name="'+columns[i]+'" value="'+str+'" >';
}else if(inputType[i] == "select"){
    input = '<select class="input-medium" name="'+columns[i]+'">';
    for(i=0;i<selectOpt.length;i++){
//          console.log(selectOpt[i]);
        selected = "";
        if(str == selectOpt[i])
            selected = "selected";
        input += '<option value="'+selectOpt[i]+'" '+selected+'>'+selectOpt[i]+'</option>';
    }
    input += '</select>';
 }

  return input;
}
ajax = function (params,action){
 // alert(params);
 // alert(action);
 $.ajax({
    type: "POST", 
    url: "ajax.php", 
    data : params+"&action="+action,
    dataType: "json",
    success: function(response){
      switch(action){
        case "save":
            var seclastRow = $("."+table+" tr").length;
        //  alert(response.success);
            if(response.success == 1){
                var html = "";

                html += "<td>"+parseInt(seclastRow - 1)+"</td>";
                for(i=0;i<columns.length;i++){
                    if(columns[i] == '_fk_PO_Req_ID'){
                        html +=  '';
                    }else{
                        html +='<td  style="text-align:center" class="'+columns[i]+'">'+response[columns[i]]+'</td>';
                    }
                }
                html += '<td><a href="javascript:;" id="'+response["id"]+'" class="ajaxEdit"><img src="'+editImage+'"></a> <a href="javascript:;" id="'+response["id"]+'" class="'+deletebutton+'"><img src="'+deleteImage+'"></a></td>';
                // Append new row as a second last row of a table
                $("."+table+" tr").last().before('<tr id="'+response.id+'">'+html+'</tr>');

                if(effect == "slide"){
                    // Little hack to animate TR element smoothly, wrap it in div and replace then again replace with td and tr's ;)
                    $("."+table+" tr:nth-child("+seclastRow+")").find('td')
                     .wrapInner('<div style="display: none;" />')
                     .parent()
                     .find('td > div')
                     .slideDown(700, function(){
                          var $set = $(this);
                          $set.replaceWith($set.contents());
                    });
                }
                else if(effect == "flash"){
                   $("."+table+" tr:nth-child("+seclastRow+")").effect("highlight",{color: '#acfdaa'},100);
                }else
                   $("."+table+" tr:nth-child("+seclastRow+")").effect("highlight",{color: '#acfdaa'},1000);

                // Blank input fields
                  $(document).find("."+table).find(inputs).filter(function() {
                    // check if input element is blank ??
                    this.value = "";
                    $(this).removeClass("success").removeClass("error");
                });
            }
        break;

      }
    },
    error: function(){
        alert("Unexpected error, Please try again");
    }
  });

}

  • 写回答

1条回答 默认 最新

  • duan0403788996 2015-04-14 20:27
    关注

    You cannot upload a file like a regular form field when you use ajax.

    There are two solutions for that:

    1. Use FormData. This will work in modern browswers;
    2. Use a jQuery file upload plugin. This is only necessary if you need to support browsers that do not support FormData: Internet Explorer 9 and below.

    You can find a nice explanation of the use of FormData here on SO: How to use FormData for ajax file upload

    评论

报告相同问题?

悬赏问题

  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)