序列化文件类型 jQuery

Serialize file type jQuery

提问by Maneesh Mehta

I'm trying to serialize my form data including file image field using jquery.form.jsjQuery API. The API is helping me to serailze data fields including image and return image object as [object file]

我正在尝试使用jquery.form.jsjQuery API序列化我的表单数据，包括文件图像字段。API 正在帮助我将数据字段包括图像和返回图像对象作为[object file]

Here is my code for serialization

这是我的序列化代码

    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);                
                 }
           });

Stuck with issue... Help will be much appreciated.

遇到问题...帮助将不胜感激。

Thanks

谢谢

采纳答案by guybennet

let me help you. I made this just 1 day ago. I have form including image field. when you submit it its uploading image via jquery.form.js

让我来帮助你。我只是 1 天前做的。我有包括图像字段的表格。当你通过它提交它的上传图片时jquery.form.js

Note: I am uploading file with jqueryimageupload.php, if you want I can paste it. It is a simple php file upload. http://www.w3schools.com/php/php_file_upload.asp

注意：我用jqueryimageupload.php上传文件，如果你想要我可以粘贴它。这是一个简单的php文件上传。http://www.w3schools.com/php/php_file_upload.asp

html part:

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();     
}

at last form 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 }     
    });
 });

回答by Trofimov Igor

You can use this way (from http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/)

您可以使用这种方式（来自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
    } );
  } );

it's more flexible and easy way

这是更灵活和简单的方法

回答by Adam Waite

HTML

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 (note that any methods following self are instance methods, I use Joose)

Javascript（注意 self 之后的任何方法都是实例方法，我使用 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');

                }

            }

        });

You can't upload images using just jQuery native methods. Check out http://jquery.malsup.com/form/

您不能仅使用 jQuery 本机方法上传图像。查看http://jquery.malsup.com/form/

It has methods that'd do this for you perfectly.

它的方法可以完美地为您做到这一点。

That just appears to work for me. On the back end I can grab POST params with $_POST and files with $_FILES (or something like that)

这似乎对我有用。在后端，我可以使用 $_POST 获取 POST 参数，并使用 $_FILES （或类似的东西）获取文件

Looks like ajaxSubmit instantly posts the form with serialized data done automatically.

看起来 ajaxSubmit 会立即发布带有自动完成的序列化数据的表单。

Hope that helps.

希望有帮助。

回答by Robin Maben

You can't use ajax for file upload. To simulate the effect though, you can have a form in a hidden iframe and submit/ .submit()it to the upload url.

您不能使用 ajax 进行文件上传。不过，为了模拟效果，您可以在隐藏的 iframe 中创建一个表单并将其提交/提交.submit()到上传 url。

More or less like this one.

或多或少喜欢这个。