序列化文件類型jQuery

Question

我試圖序列化我的表單數據，包括文件圖像字段使用jquery.form.js jQuery API。 的API幫助我serailze數據領域，包括圖像，並返回圖像對象爲[object file]

這裏是我的系列化

var data = $js("form[name=ajx_imgupload]").formSerialize(); 
    var img = $js("#upload_image").fieldSerialize(); 

    $js.ajax({ 
       url: "index.php?option=com_obituary&task=upload", 
       type: "POST", 
       dataType:"json", 
       data: data, 
       beforeSend: function(){ 
        $js(".loadingblock").show(); 
       }, 
       complete: function(){ 
        $js(".loadingblock").hide(); 
       }, 
       success: function(res){ 
        alert(); 
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        alert(textStatus);     
       } 
      }); 

與問題卡住代碼...幫助將非常感激。

感謝

Answer 1

讓我來幫你。我是在1天前製作的。我有包括圖像領域的形式。當你提交它的上傳圖像通過jquery.form.js

注意：我上傳文件與jqueryimageupload.php，如果你想我可以粘貼它。這是一個簡單的PHP文件上傳。 http://www.w3schools.com/php/php_file_upload.asp

HTML的一部分：

<form name="imageform" id="imageform" action="jqueryimageupload.php" method="post"> 
    <input type="file" name="resim" id="img" onchange="ImageUpload()" /> 
    <input type="hidden" name="action" value="imageup" /> 
</form> 

的jQuery：

function ImageUpload() { 
    $("#return").show(); 
    $("#return").html(''); 
    $("#return").html('<img src="images/load2.gif" alt="Uploading...."/> wait, uploading...'); 
    $("#imageform").ajaxForm({ 
     target: '#return', 
     success: function() { 
      $("#return").fadeOut(10000); 
     } 
    }).submit();  
} 

最後提交表單：

$('#form').submit(function() { 
    var img=$('#image').val(); 
    var forms=($(this).serialize()); 
    $.ajax({ 
     type:"POST",    
     url: "do.php?do=upload", 
     data:forms+'&r='+encodeURIComponent(img), 
     success: function(result){ //your code }  
    }); 
}); 

Answer 2

HTML

<!--Add Inventory Form--> 

<div id="addInventoryFormHTML" class style="display:none"> 

    <!--Form--> 
    <form id="addInventoryForm" novalidate="novalidate" enctype="multipart/form-data"> 

     <input id="itemTitleField" class="textField addInventoryField" name="itemTitleField" type="text" placeholder="Item Title"/> 

     <textarea id="itemDescriptionField" class="textAreaField addInventoryField" name="itemDescriptionField" type="textarea" placeholder="Item Description"></textarea> 

     <input id="itemPictureField" class="uploadField addInventoryField" name="itemPictureField" type="file"/> 

    </form> 

    <!--Errors--> 
    <div id="inventoryAddErrors"></div> 

</div> 

的Javascript（注意，下面的自任何方法都是實例方法，我用Joose）

$(form).ajaxSubmit({//note that form is just the form built with a jQuery selector 

      url: self.returnBaseULR() + '/ajaxadd', 

      type: 'POST', 

      error: function(xhr, status, error) { 
       console.log('Unable to contact the server'); 
      }, 

      success: function(response){ 

       var jsObjectFromResponse = JSON.parse(response); 

       if(jsObjectFromResponse.success){ 

        self.cLog('Item uploaded successfully!'); 
        document.location.reload(); 

       } else { 

        self.cLog('Listing failed, see AJAX response'); 

       } 

      } 

     }); 

您不能上傳只使用jQuery的本地圖片方法。退房http://jquery.malsup.com/form/

它有方法，會爲你完美地做到這一點。

這似乎只爲我工作。在後端，我可以用$ _POST和$ _FILES（或類似的東西）獲取POST參數

看起來像ajaxSubmit立即發佈帶有自動完成序列化數據的表單。

希望有所幫助。

Answer 3

您無法使用ajax進行文件上傳。爲了模擬效果，您可以在隱藏的iframe中創建一個表單，然後將其提交到上傳網址。

或多或少是this one.

Answer 4

您可以用這種方式（從http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/）

$('#my-form') 
    .submit(function(e) { 
    $.ajax({ 
     url: 'http://host.com/action/', 
     type: 'POST', 
     data: new FormData(this), 
     processData: false, 
     contentType: false 
    }); 
    }); 

它更靈活，簡便的方法