Php 使用jquery ajax和可复制的输入上传图像

更新：我几乎解决了这个问题，请看我只需要对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}
    });

我需要将其添加到的表单使用以下内容提交：

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

我将如何使插件与我的提交表单一起工作

以下是当前工作上传表单的

然后，我需要将工作表单与相结合（我已将其缩短为仅上载字段，但还有大量其他信息）

还有php发送函数：

<?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.";
    }
?>

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

---

我有两个可复制的字段，在提交时将信息放入JSON数组，然后通过PHP解析为电子邮件，我试图做的是创建一个文件字段，在该字段中上传图像并与电子邮件一起发送，但是在网上做了很多研究之后，我发现这在ajax中是不可能的，所以我找到了真正可以工作的插件，现在我正在尝试将它与我的原始表单结合起来获取完整的本地文件路径需要什么。若要处理上载的文件，您不需要知道完整的文件路径。浏览器自行承担此任务

请看这里，你一定会从这个链接中受益

---

如果我理解正确，您希望将一些自定义数据附加到文件上载。对吗

---

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

我不知道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中添加代码（在MVC3asp.net中，我们就是这样做的）

---

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

它可以上传多个文件，甚至支持拖放，但它的纯javascript不是jQuery，但另一方面，Ray Nicholus将Valums代码移植到了jQuery插件中

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

我的上传实现如下：

提供将文件上载到服务器的接口

使文件上载器上载到服务器上的某个文件夹，然后 返回服务器上文件的名称和路径（通常为“上载”） 文件夹“/“文件名”），以便您可以将其存储在隐藏元素中 形式

当用户保存数据时，只将文件的路径（从步骤2获得）保存到数据库中

注意：这样，您就不需要为文件上传复制任何输入表单，因为您可以上传任意数量的文件，当然，只要您的服务器能够处理；）

解决了这个问题

这就像添加

method=“post”action=”一样简单http://globalgeorgia.co.za/modules/mod_appform/js/mail.php“

然后也

type=“submit”

到submit函数，它在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('<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");
        }
    }); 

    })();   
} 

if（isValid）{
getValues（）；
var jsonData=JSON.stringify（结果）；
（功能（）{
var bar=jQuery（'.bar'）；
var percent=jQuery（'.percent'）；
var status=jQuery（“#status”）；
jQuery（'#spinner'）.html（''）；
jQuery（“#app_form”）.ajaxForm({
类型：“POST”，
url:“http://globalgeorgia.co.za/modules/mod_appform/js/mail.php",
数据类型：“json”，
//伊夫拉姆：是的，
数据：{parameters:jsonData}，
beforeSend:function（）{
status.empty（）；
jQuery（'#spinner'）.html（）；
var percentVal='0%'；
css（“宽度”，百分比值）
html（percentVal）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
var percentVal=percentComplete+“%”；
css（“宽度”，百分比值）
html（percentVal）；
},
完成：函数（xhr）{
html（xhr.responseText）；
jQuery（'#spinner'）.html（“sent”）；
}
}); 
})();   
} 

---

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

我认为问题不够集中。你写了一些关于图像的东西，但却不清楚到底是什么问题。另外，最好将有问题的代码隔离出来，而不是完全显示出来。。。更好？我该如何添加这些参数？我不知道如何传递参数try no我指的是AjaxOptions options=new AjaxOptions，如果我没有弄错的话，我认为这是asp的更多代码。准备表单中的隐藏输入（在服务器上或创建表单的任何地方），然后在正确的时间调用$（'#thatinput'）.val（jsonData）（当数据更改或单击“提交”时）。您好，我想我以前尝试过这个，但会再次研究它。谢谢