javascript 无法将内容附加到 FormData()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28047234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't append content to FormData()
提问by Groschenroman
I have two different JS functions to handle image uploads. One to read the file and to (globally) create the FormData object and the other to send it to a PHP file via AJAX.
我有两个不同的 JS 函数来处理图像上传。一个读取文件并（全局）创建 FormData 对象，另一个通过 AJAX 将其发送到 PHP 文件。
Even though the fileis valid I can't append it to the FormData. And strings neither. And as it turns out I'm only sending empty XHRequests via Ajax, because I don't get any other content from PHP then empty arrays.
即使file有效，我也无法将其附加到 FormData。和字符串都不是。事实证明，我只通过 Ajax 发送空的 XHRequest，因为我没有从 PHP 和空数组中获取任何其他内容。
Since the first JS function initializes the formData variable globally the second function should have no problems using it, am I right?
由于第一个 JS 函数全局初始化 formData 变量，因此第二个函数使用它应该没有问题，对吗？
My Javascript looks like this (I commented out some unnecessary lines:
我的 Javascript 看起来像这样（我注释掉了一些不必要的行：
$(document).ready(function(){
var formUplImg = $('.form-upl-img');
var fileInput = $('.file-input');
// Analyse files from input immediately
fileInput.on('change', function(){
readFile($(this).attr('id'));
})
// Upload images on submit
formUplImg.on('submit', function(event) {
uploadImg($(this), event);
});
function readFile(id){
// Grab file that's supposed to be uploaded
var fileInput = document.getElementById(id);
var fileCount = fileInput.files.length;
formData = new FormData();
// If there is no file
if( fileCount!= 1 ){
// goodImg = false;
// Error message
// showMsgBar(iClose, 'Da ist nichts.', 'Bitte w?hle zuerst eine Datei aus.', red);
// If there is a file
} else {
// Save file attributes
var file = fileInput.files[0];
var fileName = fileInput.files[0].name;
var fileSize = fileInput.files[0].size;
var fileType = fileInput.files[0].type;
// If file is not an image
if( !fileType.match(/image.*/) ) {
// goodImg = false;
// Error message
// showMsgBar(iClose, 'Ungültiger Dateityp.', 'Das Bild muss ein JPG, PNG, GIF oder SVG sein.', red);
// If file is an image
} else {
// If file size exceeds 3MB
if( fileSize > 3145728 ) {
// goodImg = false;
// Error message
// showMsgBar(iClose, 'Das Bild ist zu gro?.', 'Die Dateigr??e darf max. 3MB betragen.', red);
// If image file size is ok
} else {
// goodImg = true;
// Distinguish img use cases
if( fileInput.id.indexOf('icon') > -1 ) {
var imgUsage = 'icon'; // round user icon (for usage in header)
} else if ( fileInput.id.indexOf('logo') > -1 ) {
var imgUsage = 'logo'; // horizontal logo (contributors/admin or corporation logo)
} else if ( fileInput.id.indexOf('photo') > -1 ) {
var imgUsage = 'photo'; // photo for posts
} // img use cases
console.log(file, imgUsage); // => the file with all attributes + 'icon'
formData.append(imgUsage+'_upload_input', file);
formData.append('img-usage', imgUsage);
console.log(file, imgUsage); // => the file with all attributes + 'icon'
} // /file size is ok
} // /file is an image
} // /file is not empty
} // /readFile()
function uploadImg($this, event){
var serialForm = $this.serialize();
console.log(serialForm.toString()); // => 'user_id=36'
$.ajax({
url : "test-upload.php",
type : "POST",
data : formData+serialForm,
async : true,
cache : false,
processData: false,
contentType: false,
success : function(callback){
console.log(callback);
formdata = new FormData();
}
});
event.preventDefault();
} // /uploadImg
}); // /jQuery
HTML
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
</head>
<body>
<h1>Test</h1>
<form action="" method="post" name="form_profile_icon_upload" class="form form-profile form-upl-img form-profile-side-right" id="form-profile-icon-upload" enctype="multipart/form-data">
<fieldset class="fieldset icon-upload-fieldset" id="profile-icon-upload-fieldset">
<legend class="legend">Icon ?ndern <span class="label-span">(siehe oben)</span></legend>
<input type="file" name="icon_upload_input" class="file-input icon-upload-input" id="profile-icon-upload-input" />
<p class="form-txt"><strong>Hinweis:</strong><br />
Die Dateigr??e darf <strong>3 MB</strong> nicht überschreiten. Quadratische Icons eignen sich optimal, sind aber kein Muss.</p>
<input type="hidden" name="user_id" value="36" />
<button type="submit" name="profile_icon_upl_btn" class="button button-green form-sbmt-btn" id="profile-icon-upl-btn" value="Hochladen">Hochladen</button>
<p class="img-del-txt">
</p>
</fieldset>
</form><!-- Icon upload form -->
</body>
</html>
The PHP file looks like this (for test purposes):
PHP 文件如下所示（用于测试目的）：
<?php
if( isset($_POST) && isset($_FILES) ){
print_r($_POST);
echo ($_POST['icon_upload_input']);
print_r($_FILES);
die();
}
I'm using latest Firefox 35.0 and jQuery 2.1.3. Can anyone help me out?
我使用的是最新的 Firefox 35.0 和 jQuery 2.1.3。谁能帮我吗？
采纳答案by Musa
Your problem is here data: formData+serialForm,.
FormData must be passed alone, if you want to add data to it use the constructor or append.
你的问题在这里data: formData+serialForm,。
FormData 必须单独传递，如果您想向其中添加数据，请使用构造函数或append.
function uploadImg($this, event){
var formData = new FormData($this[0]); //construct the form data with the form
...
formData.append(imgUsage+'_upload_input', file);
formData.append('img-usage', imgUsage);
...
data: formData, //just pass the formdata object
回答by Ideal Bakija
Try reading you file like this:
尝试像这样读取您的文件：
var file = $('.file-input').prop('files')[0];
formData.append('file',file);
This worked for me!
这对我有用！
