php - 使用具有可复制输入的 jquery ajax 上传图像

Question

更新:我几乎已经解决了这个问题，请参阅Jquery form no submission to IE7 and IE8我只需要对 ie7 和 ie8 进行排序，

我一直在使用 THIS 将文件作为电子邮件附件上传的插件，我已经达到了它实际工作的程度，唯一的问题是它目前使用它来提交:

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

如何让插件与我的提交表单一起使用？

这是 JSFIDDLE 当前有效的上传表单。

然后是我需要将工作表格与 JSFIDDLE 结合起来的表格(我已将其缩短为仅上传字段，但还有很多其他信息)

另外还有 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 是不可能的，所以我找到了 THIS 实际工作的插件，现在我只是想将它与我的原始形式结合起来

Answer 1

我不知道这是否适合您的需要，但我已经使用 Andrew Valums 文件 uploader 来获得相同的结果。

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

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

我的上传实现是这样的:

1. 提供上传文件到服务器的接口(interface)
2. 使文件 uploader 上传到服务器上的某个文件夹，并且返回服务器上文件的名称和路径(通常是“上传folder"/"file name") 这样你就可以把它存储在一个隐藏的元素中表格
3. 当用户保存他们的数据时，只将文件的路径(从步骤 2 中获得)保存到数据库中

注意:有了这个，你不需要为文件上传复制任何输入表单，因为你可以上传任意数量的文件，当然只要你的服务器可以处理它；)

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