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


**更新:**大家好,我几乎已经解决了这个问题,请看 Jquery表示没有提交给IE7和IE8 我只需要对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}
    });

我如何使用我的提交形式使插件工作?

这是 的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 这个 插件实际上工作,现在我只是想将它与我原来的形式结合起来


9398
2018-01-28 10:40


起源

我认为问题不够集中。你写了一些关于图像的东西,但是现在还不是很清楚究竟是什么问题。此外,隔离有问题的代码而不是完全显示它可能是个好主意。 - Roy
谢谢你的建议......更好吗? - Dawid van der Hoven


答案:


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

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

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

我上传的实现是这样的:

  1. 提供将文件上传到服务器的界面
  2. make file-uploader上传到服务器上的某个文件夹,和 返回服务器上文件的名称和路径(通常是“上传” 文件夹“/”文件名“)因此您可以将其存储在隐藏元素中 表格
  3. 当用户保存数据时,只将文件路径(从步骤2获得)保存到数据库中

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

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


4
2018-02-02 05:00



嗨,我想我以前曾尝试过这个,但会再次调查一下..谢谢 - Dawid van der Hoven


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

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


3
2018-01-30 12:52



我对jQuery并不是那么精彩,你能举个例子吗?... - Dawid van der Hoven
在表单中(在服务器上或在创建表单时)准备隐藏的输入,然后在正确的时间(当数据更改或单击提交时)调用$('#thatinput')。val(jsonData)。 - Josef Kufner


解决了这个问题..

它就像添加一样简单 method="post" action="http://globalgeorgia.co.za/modules/mod_appform/js/mail.php" 然后也 type="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");
        }
    }); 

    })();   
} 

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


3
2018-02-04 11:50





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

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


2
2018-01-30 12:51





我不知道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中添加代码(in MVC3 asp .net我们喜欢这个)

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

2
2018-01-30 13:26



如何添加这些参数? - Dawid van der Hoven
我不确切知道如何传递参数try 这个 - Amol
不,我指的是AjaxOptions options = new AjaxOptions,我认为如果我没有弄错的话,那就是asp的更多代码.. - Dawid van der Hoven