首頁猿問使用jQuery.ajax發(fā)送mu...

使用jQuery.ajax發(fā)送multipart / formdata

JavaScript JQuery Html/CSS

拉風(fēng)的咖菲貓 2019-05-24 13:53:49

使用jQuery.ajax發(fā)送multipart / formdata我使用jQuery的ajax函數(shù)將文件發(fā)送到服務(wù)器端PHP腳本時(shí)遇到問題?？梢垣@取文件列表$('#fileinput').attr('files')但是如何將此數(shù)據(jù)發(fā)送到服務(wù)器？使用文件輸入時(shí)$_POST，服務(wù)器端php腳本上的結(jié)果array（）為0（NULL）。我知道這是可能的（雖然我到目前為止還沒有找到任何jQuery解決方案，只有Prototye代碼（http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html））。這似乎是相對較新的，所以請不要通過XHR / Ajax提及文件上傳，因?yàn)樗隙ㄓ杏?。我需要Safari 5中的功能，F(xiàn)F和Chrome會(huì)很好但不是必需的。我現(xiàn)在的代碼是：$.ajax({ url: 'php/upload.php', data: $('#file').attr('files'), cache: false, contentType: 'multipart/form-data', processData: false, type: 'POST', success: function(data){ alert(data); }});

查看完整描述

4 回答

牧羊人nacy

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊

從Safari 5 / Firefox 4開始，最簡單的方法是使用FormData該類：

var data = new FormData();jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);});

所以現(xiàn)在你有了一個(gè)FormData對象，隨時(shí)可以與XMLHttpRequest一起發(fā)送。

jQuery.ajax({
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }});

您必須將contentType選項(xiàng)設(shè)置為false，強(qiáng)制jQuery不Content-Type為您添加標(biāo)題，否則，邊界字符串將丟失。此外，您必須將processData標(biāo)志設(shè)置為false，否則，jQuery將嘗試將您FormData轉(zhuǎn)換為字符串，這將失敗。

您現(xiàn)在可以使用以下方法在PHP中檢索文件：

$_FILES['file-0']

（只有一個(gè)文件，file-0除非您multiple在文件輸入中指定了屬性，在這種情況下，數(shù)字將隨每個(gè)文件遞增。）

為舊版瀏覽器使用FormData仿真

var opts = {
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }};if(data.fake) {
    // Make sure no text encoding stuff is done by xhr
    opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
    opts.contentType = "multipart/form-data; boundary="+data.boundary;
    opts.data = data.toString();}jQuery.ajax(opts);

從現(xiàn)有表單創(chuàng)建FormData

而不是手動(dòng)迭代文件，也可以使用現(xiàn)有表單對象的內(nèi)容創(chuàng)建FormData對象：

var data = new FormData(jQuery('form')[0]);

使用PHP本機(jī)數(shù)組而不是計(jì)數(shù)器

只需將文件元素命名為相同，并在括號(hào)中結(jié)束名稱：

jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file[]', file);});

$_FILES['file']然后將是一個(gè)包含上傳的每個(gè)文件的文件上載字段的數(shù)組。我實(shí)際上推薦這個(gè)在我的初始解決方案，因?yàn)樗菀椎?/p>

反對回復(fù) 2019-05-24

ibeautiful

TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊

只是想為拉斐爾的回答添加一些內(nèi)容。$_FILES無論您是否使用JavaScript提交，以下是如何讓PHP生成相同的內(nèi)容。

HTML表單：

<form enctype="multipart/form-data" action="/test.php" method="post" class="putImages">
   <input name="media[]" type="file" multiple/>
   <input class="button" type="submit" alt="Upload" value="Upload" /></form>

PHP $_FILES在沒有JavaScript的情況下提交時(shí)生成：

Array
(
    [media] => Array
        (
            [name] => Array
                (
                    [0] => Galata_Tower.jpg
                    [1] => 518f.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpIQaOYo
                    [1] => /tmp/phpJQaOYo
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                )

            [size] => Array
                (
                    [0] => 258004
                    [1] => 127884
                )

        )

)

如果你進(jìn)行漸進(jìn)增強(qiáng)，使用Raphael的JS提交文件......

var data = new FormData($('input[name^="media"]'));     jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
    data.append(i, file);});$.ajax({
    type: ppiFormMethod,
    data: data,
    url: ppiFormActionURL,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
        alert(data);
    }});

...這是PHP的$_FILES數(shù)組在使用JavaScript提交之后的樣子：

Array
(
    [0] => Array
        (
            [name] => Galata_Tower.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpAQaOYo
            [error] => 0
            [size] => 258004
        )

    [1] => Array
        (
            [name] => 518f.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpBQaOYo
            [error] => 0
            [size] => 127884
        )

)

這是一個(gè)很好的數(shù)組，實(shí)際上有些人會(huì)變換$_FILES，但我發(fā)現(xiàn)使用相同的數(shù)據(jù)是有用的$_FILES，無論JavaScript是否用于提交。所以，這里有一些JS的小改動(dòng)：

// match anything not a [ or ]regexp = /^[^[\]]+/;var fileInput = $('.putImages input[type="file"]');
var fileInputName = regexp.exec( fileInput.attr('name') );
// make files availablevar data = new FormData();
jQuery.each($(fileInput)[0].files, function(i, file) {
    data.append(fileInputName+'['+i+']', file);});

（2017年4月14日編輯：我從FormData（）的構(gòu)造函數(shù)中刪除了表單元素 - 在Safari中修復(fù)了此代碼。）

那段代碼做了兩件事。

input自動(dòng)檢索name屬性，使HTML更易于維護(hù)?，F(xiàn)在，只要form有類putImages，其他一切都會(huì)自動(dòng)處理。也就是說，input不需要任何特殊名稱。
普通HTML提交的數(shù)組格式由data.append行中的JavaScript重新創(chuàng)建。注意括號(hào)。

通過這些更改，現(xiàn)在使用JavaScript $_FILES提交與使用簡單HTML提交的數(shù)組完全相同。

反對回復(fù) 2019-05-24

陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

看看我的代碼，它為我做的工作

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

反對回復(fù) 2019-05-24

4 回答
0 關(guān)注
4438 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

使用jQuery.ajax發(fā)送multipart / formdata

使用jQuery.ajax發(fā)送multipart / formdata

4 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用jQuery.ajax發(fā)送multipart / formdata

使用jQuery.ajax發(fā)送multipart / formdata

4 回答

相關(guān)問題推薦

添加回答