Serialize file type jQuery

后端 未结 4 1603
长发绾君心
长发绾君心 2021-02-08 08:34

I\'m trying to serialize my form data including file image field using jquery.form.js jQuery API. The API is helping me to serailze data fields including image

相关标签:
4条回答
  • 2021-02-08 08:51

    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.

    More or less like this one.

    0 讨论(0)
  • 2021-02-08 08:52

    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)

    $(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/

    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)

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

    Hope that helps.

    0 讨论(0)
  • 2021-02-08 08:56

    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

    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

    html part:

    <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 }     
        });
     });
    
    0 讨论(0)
  • 2021-02-08 08:58

    You can use this way (from 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

    0 讨论(0)
提交回复
热议问题