Sắp xếp theo loại tệp jQuery

Question

Tôi đang cố gắng tuần tự hóa dữ liệu biểu mẫu của mình bao gồm trường hình ảnh tệp bằng cách sử dụng jquery.form.js API jQuery. API đang giúp tôi serailze trường dữ liệu bao gồm cả hình ảnh và trở về đối tượng hình ảnh như [object file]

Đây là mã của tôi cho 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);     
       } 
      }); 

Bị mắc kẹt với vấn đề ... giúp sẽ được nhiều đánh giá cao.

Cảm ơn

Answer 1

hãy để tôi trợ giúp bạn. Tôi đã thực hiện điều này chỉ 1 ngày trước. Tôi có mẫu bao gồm cả lĩnh vực hình ảnh. khi bạn gửi hình ảnh tải lên của nó qua jquery.form.js

Lưu ý: Tôi đang tải tệp lên bằng jqueryimageupload.php, nếu bạn muốn tôi có thể dán nó. Nó là một tập tin tải lên php đơn giản. phần 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();  
} 

ở dạng cuối cùng nộp:

$('#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 (lưu ý rằng bất kỳ phương pháp sau đây tự là phương pháp dụ, tôi sử dụng 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'); 

       } 

      } 

     }); 

Bạn không thể tải lên hình ảnh chỉ sử dụng jQuery mẹ đẻ phương pháp. Hãy xem http://jquery.malsup.com/form/

Có các phương pháp sẽ làm điều này cho bạn một cách hoàn hảo.

Điều đó dường như chỉ hoạt động đối với tôi. Ở mặt sau, tôi có thể lấy thông số POST với $ _POST và các tệp có $ _FILES (hoặc một cái gì đó tương tự)

Có vẻ như ajaxSubmit sẽ ngay lập tức đăng biểu mẫu với dữ liệu tuần tự được thực hiện tự động.

Hy vọng điều đó sẽ hữu ích.

Answer 3

Bạn không thể sử dụng ajax để tải lên tệp. Để mô phỏng hiệu ứng, bạn có thể có biểu mẫu trong iframe ẩn và gửi/.submit() nó vào url tải lên.

Nhiều hoặc ít hơn như this one.

Answer 4

Bạn có thể sử dụng cách này (từ 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 
    }); 
    }); 

nó linh hoạt hơn và dễ dàng