问题
I am currently using this plugin to send images as an attachment to an email as well as some other json data, and i am getting the proper results. But just not from IE7 and IE8, its not sending at all.. I have no idea why..
Suggestions anyone?
Here's the jsFiddle.
and then the javascript:
var g_counter = 1;
var dependant = ["dependant"];
var group;
var upload_input_passport = ["upload-passport-1"];
var upload_input_id = ["upload-id-1"];
var surname_input_groups = ["surname-group-1"];
var input_groups = ["group-1"];
var name_fields=[0];
var id_upload_input = "<input class='id_up' name='myfile[]' type='file' />";
var passport_upload_input = "<input class='passport_up' name='myfile[]' type='file' />";
var surname_input = "<input id='surname' class='surname' name='surname' type='text' data-error='Surname error' />";
//Dependants Inputs
jQuery(document).ready(function(e) {
jQuery(name_fields).each(function() {
jQuery(id_upload_input).appendTo('#upload-id-1');
});
jQuery(name_fields).each(function() {
jQuery(passport_upload_input).appendTo('#upload-passport-1');
});
jQuery(name_fields).each(function() {
jQuery(surname_input).appendTo('#surname-group-1');
});
jQuery('#clone').click(function(e) {
e.preventDefault();
clone_dependant();
});
function clone_dependant() {
var oldId = g_counter;
g_counter++;
currentdep ='dependant-'+g_counter;
var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', currentdep);
var id_up_newDiv = 'upload-id-'+ g_counter;
var passport_up_newDiv = 'upload-passport-'+ g_counter;
var surname_newDiv = 'surname-group-'+ g_counter;
// Find div's inside the cloned object and set a new id's
$clonedDiv.find('#upload-id-1').attr('id',"upload-id-" + g_counter );
$clonedDiv.find('#upload-passport-1').attr('id',"upload-passport-" + g_counter );
$clonedDiv.find('#surname-group-1').attr('id',"surname-group-" + g_counter );
$clonedDiv.find('#dep_num').html(g_counter);
// You don't need to Loop thru the inputs to set the value
$clonedDiv.find('input[type="file"]').val('');
// Insert the cloned object
$clonedDiv.insertAfter("#dependant-" + oldId);
upload_input_id.push(id_up_newDiv);
upload_input_passport.push(passport_up_newDiv);
surname_input_groups.push(surname_newDiv);
}
var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){
result['dependants'] = [];
jQuery('div[class*="dependant"]').each(function(k, v){
dep_counter++
dependants = {};
dependants['surname'] = jQuery(v).find('.surname').val();
dependants['id_upload'] = jQuery(v).find('.id_up').val();
dependants['passport_upload'] = jQuery(v).find('.passport_up').val();
result['dependants'].push(dependants);
});
};
jQuery('#submit').click(function(){
getValues();
var jsonData = JSON.stringify(result);
(function() {
var bar = jQuery('.bar');
var percent = jQuery('.percent');
var status = jQuery('#status');
jQuery('form').ajaxForm({
type: "POST",
url: "mail.php",
dataType: "json",
//iframe: true,
data: {parameters: jsonData},
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);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
})();
});
});
and the HTML:
<form enctype="multipart/form-data">
<div class="dependant-1" id="dependant-1">
<div class="title">dependant <span id="dep_num">1</span>:</div>
<div class="block_wrap left border_right">
<div class="block">'surname'<div id="surname-group-1" class="right"></div></div>
</div>
<div class="block_wrap left border_right no_b">
<div class="block">dep_passport<div id="upload-id-1" class="right"></div>
</div>
</div>
<div class="block_wrap right no_b">
<div class="block">dep_id<div id="upload-passport-1" class="right"></div>
</div>
</div>
</div>
<button id="submit">sub</button>
</form>
<button id="clone">duplicate</button>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
and finally the PHP used to send it:
<?php /*?><?php
$newdirectory = "tmp";
$count = 0;
foreach ($_FILES['myfile']['name'] as $filename)
{
$temp = $_FILES['myfile']['tmp_name'][$count];
move_uploaded_file($temp, $newdirectory . '/' . $filename);
$count++;
}
print_r($_FILES);
?><?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 = "chante@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 :)..
回答1:
The behavior of the jQuery .clone() method changed in jQuery (1.6.4+) such that older IE versions will have issues.
In 1.6.4 jQuery changed their internal behavior to use the JavaScript .cloneNode() method which older IE versions have issue with.
For IE7 and below, this "hack" seems to get around the issue. http://jsfiddle.net/GZffK/3/
The key part is to use the old jQuery way... using the .outerHTML property when you encounter IE7.
if($.browser.msie && (parseInt($.browser.version) < 8)){
/*
Dirty ugly hack to overcome bugs in IE with .cloneNode() method
that is now used in jQuery 1.6.4+
*/
var copiedDOMStr = $('#orig_test_0').get(0).outerHTML;
var copiedDOM = $(copiedDOMStr);
} else {
var copiedDOM = $('#orig_test_0').clone();
}
回答2:
solved the issue...
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.
thanks for eveyone's help...
来源：https://stackoverflow.com/questions/14632176/jquery-form-no-submission-to-ie7-and-ie8