javascript - new - jquery ajax upload file and data




如何在jQuery中使用Ajax請求發送FormData對象? (7)

JavaScript的:

 function submitForm() {
                var data1 = new FormData($('input[name^="file"]'));
                $.each($('input[name^="file"]')[0].files, function(i, file) {
                data1.append(i, file);
                });

    $.ajax({
      url: "<?php echo base_url() ?>employee/dashboard2/test2",
      type: "POST",
      data: data1,
      enctype: 'multipart/form-data',
      processData: false,  // tell jQuery not to process the data
      contentType: false   // tell jQuery not to set contentType
    }).done(function(data) {
        console.log("PHP Output:");
        console.log( data );
    });
    return false;
}

PHP:

public function upload_file(){

    foreach ($_FILES as $key ) {

          $name =time().$key['name'];

          $path='upload/'.$name;

          @move_uploaded_file($key['tmp_name'],$path);

    }

這個問題在這裡已經有了答案:

XMLHttpRequest Level 2標準(仍是工作草案)定義了FormData接口。 該接口使File對象附加到XHR請求(Ajax請求)。

順便說一句,這是一個新功能 - 過去,使用了“隱藏iframe技巧”(在我的另一個問題中閱讀 )。

這是如何工作的(例子):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

其中input<input type="file">字段, handler是Ajax請求的成功處理程序。

這在所有瀏覽器中都很好(除了IE之外)。

現在,我想使這個功能與jQuery一起工作。 我試過這個:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

不幸的是,這是行不通的(一個“非法調用”錯誤被拋出 - 屏幕截圖在這裡 )。 我假設jQuery需要一個簡單的鍵值對象來表示form-field-names / values,而我傳入的FormData實例顯然是不兼容的。

現在,因為可以將FormData實例傳遞到xhr.send() ,所以我希望它也可以用於jQuery。

更新:

我在jQuery的Bug Tracker上創建了一個“特性票”。 它在這裡: http://bugs.jquery.com/ticket/9995 : http://bugs.jquery.com/ticket/9995

我被建議使用“Ajax預過濾器”...

更新:

首先,讓我演示一下演示我想實現的行為。

HTML:

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript的:

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

上面的代碼導致了這個HTTP請求:

這是我需要的 - 我想要“多部分/表單數據”內容類型!

建議的解決方案將如下所示:

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

但是,這導致:

如您所見,內容類型錯誤...


如果您想使用ajax提交文件,請使用“jquery.form.js”,它可以輕鬆提交所有表單元素。

示例http://jquery.malsup.com/form/#ajaxSubmit

粗糙的看法:

<form id='AddPhotoForm' method='post' action='../photo/admin_save_photo.php' enctype='multipart/form-data'>


<script type="text/javascript">
function showResponseAfterAddPhoto(responseText, statusText)
{ 
    information= responseText;
    callAjaxtolist();
    $("#AddPhotoForm").resetForm();
    $("#photo_msg").html('<div class="album_msg">Photo uploaded Successfully...</div>');        
};

$(document).ready(function(){
    $('.add_new_photo_div').live('click',function(){
            var options = {success:showResponseAfterAddPhoto};  
            $("#AddPhotoForm").ajaxSubmit(options);
        });
});
</script>

您可以使用以下代碼在ajax請求中發送FormData對象,

$("form#formElement").submit(function(){
    var formdata = new FormData($(this)[0]);
});

這與接受的答案非常相似,但是是對於問題主題的實際答案。 這將在FormData中自動提交表單元素,並且您不需要手動將數據附加到FormData變量。

ajax方法看起來像這樣,

$("form#formElement").submit(function(){
    var formdata = new FormData($(this)[0]);
    //append some non-form data also
    formData.append('other_data',$("#someInputData").val());
    $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
           //process data
        },
        error: function(data, textStatus, jqXHR) {
           //process error msg
        },
});

您也可以像這樣手動傳遞FormData對象內的form元素作為參數

var formElem = $("#formId");
var formdata = new FormData(form[0]);

希望能幫助到你。 ;)



我認為你不能在ajax中支持所有的瀏覽器,我可能會說很好,檢查這個ajax上傳插件,看看他們是如何做到的http://valums.com/ajax-upload/


我這樣做,這對我有用,我希望這會幫助:)

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
    </script>   

還有一些尚未提及的技術可供您使用。 首先在ajax params中設置contentType屬性。

以pradeek為例:

$('form').submit(function (e) {
    var data;

    data = new FormData();
    data.append('file', $('#file')[0].files[0]);

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',

        // This will override the content type header, 
        // regardless of whether content is actually sent.
        // Defaults to 'application/x-www-form-urlencoded'
        contentType: 'multipart/form-data', 

        //Before 1.5.1 you had to do this:
        beforeSend: function (x) {
            if (x && x.overrideMimeType) {
                x.overrideMimeType("multipart/form-data");
            }
        },
        // Now you should be able to do this:
        mimeType: 'multipart/form-data',    //Property added in 1.5.1

        success: function (data) {
            alert(data);
        }
    });

    e.preventDefault();
});

在某些情況下,當強迫jQuery ajax做非預期的事情時, beforeSend事件是一個很好的選擇。 一段時間beforeSend ,人們在使用beforeSend來重寫mimeType之前,它已被添加到1.5.1中的jQuery中。 您應該可以修改before send事件中jqXHR對象的任何內容。







multipartform-data