基本上,我正在尝试使用基于Web的模拟电子邮件客户端。为此,我创建了一个文本编辑器,当用户希望在他们的消息中的某个点放置或附加图像时,他们按下一个按钮创建一个新的文件输入。上传后,会在其消息上显示图像。
当用户发送消息时,消息中的图像src标签从文件读取器模板切换到新的src,文件输入的值正在提交,图像转移到新文件夹的根文件夹中的某个位置。网站。这完全没问题。图像是唯一的,并且每条消息都有一个文件夹,其中包含来自消息本身的图像。
我现在面临的问题是,当用户希望将其消息保存为草稿时,我需要执行相同的过程。但是,唯一的区别是表单未提交,我只是使用ajax来触发表单上传。我遇到的问题是我似乎无法访问文件输入的上传状态。我无法提交表单,因为当我这样做时,我将消息发送出去,这意味着我必须省略$(form).submit( function (){});
系统。
我的问题是:如何使用ajax提交文件输入数组?到目前为止,这是我的代码:
JS:
$('a[data-command="save-reply"]').click(function(){
messid = 1;
var draftbool2 = 4;
imgS = [];
$("#inbox-reply-body").find("img").each(function(){
if($(this).attr("data-sub-src")){
var imgO = $(this).attr("data-sub-src");
var imgN = imgO.replace("postid", messid);
$(this).attr("src", imgN);
$(this).removeAttr("data-sub-src");
}
});
$(".image-list-reply").find("input[type='file']").each(function(){
imgS.push($(this));
});
alert(imgS);
var imgArray = JSON.stringify(imgS);
alert(imgArray);
var prevMessage = $('#message-body').html();
var content = $('#inbox-reply-body').html();
var body = content + "<hr><div id=\"reply-message\">" + prevMessage + "</div>";
//formdata submitting id, draftbool, and body
var fd2 = new FormData();
fd2.append('body', body);
fd2.append('draftbool', draftbool2);
fd2.append('idmessage', messid);
fd2.append('image', imgArray);
$.ajax({
type: 'POST',
url: "server/saveDraft.php",
data: fd2,
contentType: false,
processData: false,
success: function(done){
alert(done);
}
});
});
PHP
$images = json_decode($_POST['image']);
foreach($images as $l){
var_dump(implode(",", $images));
foreach($l as $f => $name){
$movedir = ("../resources/img/inbox/".$idofdraft."/");
$dir = ("resources/img/inbox/".$idofdraft."/");
$allowedExts = array("gif", "jpeg", "jpg", "png", "PNG", "JPG", "JPEG", "GIF");
$temp = explode(".", $name);
$extension = end($temp);
//Set file type and size
if ((($_FILES['image-reply']['type'] == "image/gif") || ($_FILES['image-reply']['type'] == "image/GIF")
|| ($_FILES['image-reply']['type'] == "image/jpeg") || ($_FILES['image-reply']['type'] == "image/JPEG")
|| ($_FILES['image-reply']['type'] == "image/jpg") || ($_FILES['image-reply']['type'] == "image/JPG")
|| ($_FILES['image-reply']['type'] == "image/png") || ($_FILES['image-reply']['type'] == "image/PNG"))
&& ($_FILES['image-reply']['size'] < 1073741824)
&& in_array($extension, $allowedExts)){
if($_FILES['image-reply']['error'][$f] > 0){
echo "Return Code: ".$_FILES['image-reply']['error'][$f]."<br />";
} else {
if(file_exists($movedir)){
echo " Directory Exists";
} else {
mkdir($movedir, 0777, true);
}
if(file_exists($movedir.$name)){
echo " File already exists";
$pathname = $dir.$name;
} else {
$names = $_FILES['image-reply']['tmp_name'];
if(move_uploaded_file($names, "$movedir/$name")){
$pathname = ($dir."/".$name);
echo " File has been uploaded";
}
}
}
}
}
}
HTML(在完整的PHP文件中回显,因此是\“)
<form id=\"inbox-reply\" method=\"post\" action=\"server/replyMessage.php\" enctype=\"multipart/form-data\">
<a href=\"#\" data-command=\"insertImage\"><i class=\"fa fa-image\"></i></a>
<input type=\"file\" id=\"image-upload\" name=\"image\"/>
<a href=\"#\" data-command=\"insertattach\"><i class=\"fa fa-paperclip\"></i></a>
<input type=\"file\" id=\"file-upload\" name=\"file\"/>
<a href=\"#\" data-command=\"save-reply\"><i class=\"fa fa-floppy-o\"></i></a>
</div>
<div id=\"inbox-reply-body\" class=\"reply-content\" contenteditable>
</div>
<div class=\"image-list-reply\">
</div>
<div class=\"attach-list-reply\">
</div>
<input type=\"submit\" name=\"reply\" value=\"Send\">
</form>
通常情况下,我会用foreach($l as $f => $name)
取代foreach($_POST['image-reply'] as $f => $name)
,这样可行,但在这里我应该通过ajax提交$ _POST ['image-reply'],这迫使我把所有文件输入数组。我的问题是从数组中获取它们作为可用的php元素。任何人都可以帮助我吗?
PS抱歉我不清楚,我不确定如何处理有问题的社区,更不用说这个了!简而言之,我如何从通过ajax提交的文件输入数组中获取可用的文件输入数据?
答案 0 :(得分:1)
您无法对DOM数组进行字符串化。
这就是你要做的事情:
var fd2 = new FormData();
$(".image-list-reply").find("input[type='file']").each(function(){
$.each(this.files, function(i, file){
fd2.append('image', file)
})
});
此外,我仍然建议您使用$(form).submit( function (){});
您可以从中获得良好的html5验证,但添加了event.preventDefault()