Jquery 表单没有提交到 IE7 和 IE8
Posted
技术标签:
【中文标题】Jquery 表单没有提交到 IE7 和 IE8【英文标题】：Jquery form no submission to IE7 and IE8 【发布时间】：2013-01-15 22:21:45 【问题描述】：我目前正在使用 this 插件将图像作为电子邮件的附件以及其他一些 json 数据发送，并且我得到了正确的结果。但只是不是来自 IE7 和 IE8，它根本不发送..我不知道为什么..
有人建议吗？
这是jsFiddle。
然后是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);
);
)();
);
);
和 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>
最后是用于发送它的 PHP：
<?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.";
?>
任何帮助都非常感谢:)..
【问题讨论】：
【参考方案1】：jQuery (1.6.4+) 中 jQuery .clone() 方法的行为发生了变化，因此旧版 IE 会出现问题。
在 1.6.4 中，jQuery 更改了其内部行为以使用旧 IE 版本存在问题的 JavaScript .cloneNode() 方法。
对于 IE7 及以下版本，这个“hack”似乎可以解决这个问题。 http://jsfiddle.net/GZffK/3/
关键部分是使用旧的 jQuery 方式...遇到 IE7 时使用 .outerHTML 属性。
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();
【讨论】：
但问题不是克隆问题.. 它没有发送任何内容...... 您的 $clonedDiv 的 ID 属性会出现问题，因为旧版 IE 无法正确地将源与副本分开...并且任何操作 ID 的尝试都会失败，因为它会同时更新原始和克隆...并且具有相同 ID 的 2 个元素都是无效的，并且在您稍后去查找/查找元素时很容易出错。如果您使用我添加的 jsFiddle 链接，您会看到，如果您不执行解决方法，旧版 IE 会一遍又一遍地显示相同的 ID。 非常感谢您的麻烦，我会对此进行试验并尽快向您发送反馈:)【参考方案2】：解决了问题...
就像在提交函数中添加method="post" action="http://globalgeorgia.co.za/modules/mod_appform/js/mail.php" 和type="submit" 一样简单，它在 IE 7 和 IE 8 中完美运行。
感谢大家的帮助...
【讨论】：
以上是关于Jquery 表单没有提交到 IE7 和 IE8的主要内容，如果未能解决你的问题，请参考以下文章
为啥以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery？
IE7、IE8 和 IE9 中的 jQuery 旋转图像问题