使用Ajax上傳文件 - FormData

首先，我搜索了很多關於這方面的主題，而我不想使用任何插件。使用Ajax上傳文件 - FormData

function addToDatabase(menuItem){ 
    var formData = new FormData(); 
    formData.append("Description", document.getElementById("DescriptionID").value); 
    jQuery.each($('#filesID')[0].files, function(i, file) { 
     formData.append('file-'+i, file); 
    }); 

    $.ajax({ 

    type: "POST", 
    url: "dbAdder.php", 
    data: formData, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(result){ 
     $("#PageContent").html(result); 
    } 
    }); 
}

Js函數發送給服務器的東西。雖然在服務器端代碼$_POST['Description']有價值，但$_FILES['file-0'] does not。

<input type="file" id="filesID" name="files[]" multiple /> 
<textarea id="DescriptionID" rows="5" cols="53"></textarea>

HTML部分代碼。

來源

2013-10-15 Crackeraki

有沒有解決方案。每個通過Ajax的文件上傳都涉及諸如iFrames之類的黑客。你對每個單獨的插件有什麼問題？有機會，沒有插件，你會遇到同樣的問題。 – dotancohen

因爲我不確定插件是如何工作的，如果插件的所有者在將其發送到我的服務器之前有權訪問我的數據。並且該代碼將只能看到原始網頁的數據庫的版主。 – Crackeraki

然後在解僱他們之前閱讀jQuery插件如何工作。 – dotancohen

如果您打算上傳文件，則會使其複雜化。

如果外部插件不是一個選項，我強烈建議使用XHR2。

它是純粹的JavaScript，並且很好地處理文件上傳。

但是......注意，它不是由所有的瀏覽器都支持，在這裏看到：http://caniuse.com/xhr2

// prepare xhr object 
var xhr = new XMLHttpRequest(); 

xhr.open('POST', 'dbAdder.php', true); 

// upload complete handler 
xhr.onload = function(e){ 
if (this.status == 200) { 
    // 
} 
    else { // } 
}; 

// upload progress handler 
xhr.upload.onprogress = function(e) { 
    if (e.lengthComputable) { 
      // e.total, e.loaded 
    } 
}; 

var fd = new FormData(); 
fd.append("file", file); 
fd.append("Description", 'description text'); 
fd.append("field2", 'value2'); 

// send the xml http request 
xhr.send(fd);

這裏是爲進一步使用XHR2的一個非常好的教程：http://www.html5rocks.com/en/tutorials/file/xhr2/

希望幫助

來源

2013-10-15 12:20:34 geevee

我是否必須包含「'this？ – Crackeraki

是的，它可以處理多部分/表單數據（文件和字符串，你可以稱之爲）。不，如我所說，純粹的JavaScript，不需要外部插件。 – geevee

在'fd.append（「文件」，文件）;'在'文件的變量'我必須把圖像源？ – Crackeraki

使用Ajax上傳文件 - FormData

回答

相關問題