使用带有可复制输入的jquery ajax上传图像

**更新：**大家好，我几乎已经解决了这个问题，请看Jquery表单没有提交到IE7和IE8我只需要排序ot ie7和ie8，

我一直在使用这个插件上传文件作为电子邮件附件，我已经到了它实际工作的地步，唯一的问题是它目前使用它来提交：

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); } }); 

我需要将其添加到表单中，使用此提交：

 jQuery.ajax({ type: "POST", url: "mail.php", dataType: "json", data: {parameters: jsonData} }); 

我如何使用我的提交forms使插件工作？

这是当前工作上传表单的JSFIDDLE 。

然后表单我需要将工作与JSFIDDLE结合起来（我已将其缩短为仅上传字段，但还有一堆其他信息）

这里也是php发送function：

 $value) { //Fill the aux string first $str.= "$key : $value 
"; } //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 .= "
Main member data:
"; $msg .= printMember($data["mainmember"]); $msg .= "
There are $depCount Dependants
"; foreach ($data["dependants"] as $index => $dependant) { $msg .= "
Dependant $index
"; $msg .= printMember($dependant); } $strTo = "[e-mail]"; $strSubject = "Image Testing"; $strMessage = nl2br($msg); //*** Uniqid Session ***// $strSid = md5(uniqid(time())); $strHeader = ""; $strHeader .= "From: Dawid\nReply-To:[e-mail]"; $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."; } ?> 

任何帮助非常感谢。 🙂

如果有人不完全理解这个问题，我会在这里尝试进一步解释它：

我有可复制的字段，在提交时将信息放入JSON数组然后通过PHP解析为电子邮件，我试图做的是有一个文件字段，其中图像上传并随电子邮件一起发送，但之后在网上研究了很多，我发现这是不可能的ajax，所以我发现这个插件实际上有效，现在我只是想把它与我原来的forms结合起来

Answer 1

我不知道这是否适合您的需要，但我使用了Andrew Valums文件上传器来实现相同的结果。

它可以上传多个文件，甚至有拖放支持，但它的纯javascript不是jQuery，但另一方面，Ray Nicholus已经将Valums代码分支到jQuery插件。

我的经验是Valums版本，它与jQuery并行工作没有问题。 唯一的问题是你必须以基本的javascript风格与它进行交互。

我上传的实现是这样的：

1. 提供将文件上传到服务器的界面
2. make file-uploader上传到服务器上的某个文件夹，并返回服务器上文件的名称和路径（通常是“upload folder”/“file name”），这样你就可以将它存储在表单的隐藏元素中
3. 当用户保存数据时，只将文件路径（从步骤2获得）保存到数据库中

注意：有了这个，您不需要复制任何输入表单进行文件上传，因为您可以上传任意数量的文件，只要您的服务器可以处理它的课程;）

https://github.com/valums/file-uploader

Answer 2

因此，如果我理解正确，您需要将一些自定义数据附加到文件上传。 这是对的吗？

因此，如果您不想修改正在使用的jQuery插件，我会在表单中添加一些隐藏字段，并在提交之前将自定义数据放入其中。 然后插件应该将它们拾起并与文件一起发送。

Answer 3

解决了这个问题..

它就像添加method="post" action="http://globalgeorgia.co.za/modules/mod_appform/js/mail.php"一样简单，然后type="submit"到提交function，它完美地运行在IE 7和IE 8中，然后也是这样的：

 if (isValid) { getValues(); var jsonData = JSON.stringify(result); (function() { var bar = jQuery('.bar'); var percent = jQuery('.percent'); var status = jQuery('#status'); jQuery('#spinner').html(''); 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"); } }); })(); } 

解决了发送问题，谢谢大家的帮助。

Answer 4

什么是获得完整的本地文件路径的需要。 要处理上传的文件，您不需要知道完整的文件路径。浏览器可以自行完成此任务。

请看看这里，你肯定会受益于这个链接

• 如何从firefox中的html输入表单获取文件路径

Answer 5

我不知道PHP只是添加以下内容来发布数据。 将参数传递给表单

  @{ AjaxOptions options = new AjaxOptions{ HttpMethod = "Post", url: "mail.php", dataType: "json", data: {parameters: jsonData} UpdateTargetId = "formContent", 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); }, OnFailure = "do some thing", OnBegin = "ShowProgressBar", OnComplete = function(xhr) { status.html(xhr.responseText); } }; } 

你需要在PHP中添加代码（在MVC3 asp .net中我们喜欢这样）

 @using (Ajax.BeginForm(parameters)) { }