使用带有可复制输入的jquery ajax上传图像 [英] Upload an image with jquery ajax with a duplicate-able input
问题描述
**更新：**大家好，我几乎解决了这个问题，请参阅 Jquery表单没有提交到IE7和IE8 我只需要对ie7和ie8进行排序，
**UPDATE:**Hi Everyone again, I have almost solved this problem, please see Jquery form no submission to IE7 and IE8 i just need to sort ot ie7 and ie8,
我一直在使用 这个 插件上传文件作为电子邮件附件，我已经得到它实际上有效，唯一的问题是它目前使用它来提交：
I have been using THIS plugin to upload files as an email attachment, i have gotten it to the point where it actually works, the only problem is it currently uses this to submit:
jQuery.ajax({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.css("width", percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.css("width", percentVal)
percent.html(percentVal);
//console.log(percentVal, position, total);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
我需要将表单添加到表单中，使用此表单提交：
And the form i need to add it to, uses this to submit:
jQuery.ajax({
type: "POST",
url: "mail.php",
dataType: "json",
data: {parameters: jsonData}
});
我如何使用我的提交形式使插件工作？
How would i make the plugin work with my form of submission?
这是 JSFIDDLE 当前工作上传表格。
Here's the JSFIDDLE for the current working upload form.
然后表格我需要将工作单与 JSFIDDLE （我已将其缩短为仅上传字段，但还有一堆其他信息）
and then the form i need to combine the working one with JSFIDDLE (i have shortened it to only the upload fields, but there is a bunch of other information)
这里也是php发送功能：
Also here's the php send function:
<?php
function printMember($member) {
foreach($member as $key=>$value) {
//Fill the aux string first
$str.= "$key : $value <br />";
}
//string that will be added to $msg variable inside the loop
return $str;
}
$json = $_POST['parameters'];
$json_string = stripslashes($json);
$data = json_decode($json_string, true);
$depCount = count($data["dependants"]);
$msg .= "<h2>Main member data:</h2>";
$msg .= printMember($data["mainmember"]);
$msg .= "<h2>There are $depCount Dependants</h2>";
foreach ($data["dependants"] as $index => $dependant) {
$msg .= "<h2>Dependant $index</h2>";
$msg .= printMember($dependant);
}
$strTo = "dawid@jamfactory.co.za";
$strSubject = "Image Testing";
$strMessage = nl2br($msg);
//*** Uniqid Session ***//
$strSid = md5(uniqid(time()));
$strHeader = "";
$strHeader .= "From: Dawid<test@testme.co.za>\nReply-To:test@testme.co.za";
$strHeader .= "MIME-Version: 1.0\n";
$strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
$strHeader .= "This is a multi-part message in MIME format.\n";
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-type: text/html; charset=utf-8\n";
$strHeader .= "Content-Transfer-Encoding: 7bit\n\n";
$strHeader .= $strMessage."\n\n";
//*** Attachment ***//
$count = 0;
foreach($_FILES['myfile']['name'] as $filename)
{
$temp = $_FILES['myfile']['tmp_name'][$count];
$strFilesName = $filename;
$strContent = chunk_split(base64_encode(file_get_contents($temp)));
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-Type: application/octet-stream; name=\"".$strFilesName."\"\n";
$strHeader .= "Content-Transfer-Encoding: base64\n";
$strHeader .= "Content-Disposition: attachment; filename=\"".$strFilesName."\"\n\n";
$strHeader .= $strContent."\n\n";
$count++;
}
$flgSend = @mail($strTo,$strSubject,null,$strHeader); // @ = No Show Error //
if($flgSend)
{
echo "Mail send completed.";
}
else
{
echo "Cannot send mail.";
}
?>
非常感谢任何帮助。 ：）
Any Help greatly appreciated. :)
如果有人不完全理解这个问题，我会在这里尝试进一步解释：
If anyone doesn't fully understand the question, I will try here to even further explain it:
我有可复制的字段，在提交信息时会被放入JSON数组然后被PHP解析为电子邮件，我试图做的是有一个文件字段，其中图像上传并随电子邮件一起发送，但是经过网上研究后我发现ajax是不可能的，所以我发现 这个 插件实际上有效，现在我只是想把它与原始表格结合起来
I have duplicate-able fields that on submit the information gets put into a JSON array and then gets parsed to an email by PHP, what i was trying to do is have a file field where images get uploaded and sent with the email, but after researching a lot on the web i ound that this is not possible with ajax so i found THIS plugin that actually works and now i am just trying to combine it with my original form
推荐答案
解决了这个问题..
就像添加 method =postaction =http://globalgeorgia.co一样简单.za / modules / mod_appform / js / mail.php然后 type =submit到提交功能，它完美地运行IE 7和IE 8然后也是这样：
It was as simple as adding method="post" action="http://globalgeorgia.co.za/modules/mod_appform/js/mail.php" and then also type="submit" to the submit function and it works perfectly in IE 7 and IE 8 and then also this:
if (isValid) {
getValues();
var jsonData = JSON.stringify(result);
(function() {
var bar = jQuery('.bar');
var percent = jQuery('.percent');
var status = jQuery('#status');
jQuery('#spinner').html('<img src="http://globalgeorgia.co.za/modules/mod_appform/js/ajax-loader.gif" />');
jQuery('#app_form').ajaxForm({
type: "POST",
url: "http://globalgeorgia.co.za/modules/mod_appform/js/mail.php",
dataType: "json",
//iframe: true,
data: {parameters: jsonData},
beforeSend: function() {
status.empty();
jQuery('#spinner').html();
var percentVal = '0%';
bar.css("width", percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.css("width", percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
jQuery('#spinner').html("sent");
}
});
})();
}
解决了发送问题，谢谢大家的帮助。
solved the sending issue, thanks for everyone's help.
这篇关于使用带有可复制输入的jquery ajax上传图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
