无法将内容附加到FormData（）中
我有两个不同的JS函数来处理图像上传。一个用于读取文件并（全局）创建FormData对象，另一个用于通过AJAX将其发送到PHP文件。
即使文件是有效的，我也不能将它附加到FormData和字符串中。事实证明，我只是通过Ajax发送空的XH请求，因为我不会从PHP中获得任何其他内容，然后空数组。
因为第一个JS函数在全局初始化formData变量，所以第二个函数使用它应该没有问题，对吗？
我的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
<!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>
PHP文件看起来像这样（为了测试目的）：
<?php
if( isset($_POST) && isset($_FILES) ){
print_r($_POST);
echo ($_POST['icon_upload_input']);
print_r($_FILES);
die();
}
我正在使用最新的Firefox 35.0和jQuery 2.1.3。有人能帮我吗？
共有2个答案
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
-
问题内容： 假设我有一些要将JavaScript操作添加到的链接： 当页面加载时，我给他们所有的click事件： 但让我们说之后，我添加了另一个元素，但我想给它相同的事件。我不能这样做： 因为前三个事件将包含两个事件。处理此问题的最佳方法是什么？ 问题答案： 您可以将$ .on绑定到这样的dom中始终存在的父元素。 请注意： 您可以用dom中将始终存在的元素的任何父级替换，并且父级越近越好。 具有
-
我试图用java发送电子邮件，但我总是收到，知道我做错了什么吗？我想这是t.send不是的问题，但我似乎无法让它工作，我一直得到无法连接错误之后…如有任何帮助，不胜感激：） 我能够正确地ping smtp.gmail.com，我认为连接问题是由于使用造成的，在我开始使用MultiParts之前，这也是有效的，因为我以前用它发送过电子邮件 下面是堆栈跟踪 如果我使用，它会出现以下异常。
-
剩下的代码只是添加了一些额外的可视化选项。类似于我们以前与HTML元素的交互，我们可以将侦听器函数附加到切换阴影和neighborhood 多边形可见性。 让我们开始创建一个简单的方法来切换neighborhood多边形。一般来说，我们可以通过Entity.show用实体设置可见性来隐藏实体。但是，这只为单个实体设置可见性，并且我们希望一次性隐藏或显示所有的neighborhood实体。 我们可以
-
我有一个程序，它总是将相同的文件附加到GMAIL（撰写 它所做的是： 在Android 6.0之前，它一直工作良好。现在，我在尝试使用它时收到以下错误： 无法附加空文件 Astro文件共享给我同样的错误（可能是旧版本）。 但是，我安装了ES File Explorer，当我执行相同的例程并选择该文件时，我会收到一个对话框，其中显示： 将文件作为 普通Android方式（适用于彩信、Gmail等）
-
我有3个维度为（a*2、b*2、c*2）的数据帧，而a、b、c是不同的数字。我想把它们添加到一个csv文件中，但每次都写不出来。我使用了csv的熊猫数据帧输出端 但做不到。 我的代码- 但是，我得到的最终输出是最后一个数据帧，而不是所有其他数据帧。
-
我在我的项目中使用cucumber版本4。我在我的项目中使用以下依赖项。 使用上述依赖关系，我能够生成“cucumberjvm报告”。 我还用java编写了代码，用于将屏幕截图附加到报告中，我只在场景失败时拍摄屏幕截图。 我不确定是否遗漏了什么，但屏幕截图没有附加到报告中。cucumber生成的默认html报告正在显示屏幕截图。 谁能帮我一下吗。谢谢