CODEWITHSUNDEEP
javascriptphpjqueryemail-attachmentsjquery-file-upload
Zhumpex
Zhumpex

Reputation: 131

Multiple File Uploads As Email Attachments

I display files before it is sent via email as attachments. I use this script to display files

$(function(){
    var ul = $('#po_award p#file_1');

    $('#po_award').fileupload({
        add: function (e, data) {
            var tpl = $('<li class="dialog"><a style="color: #777777"></a></li>');

            tpl.find('a').text(data.files[0].name)
                .append('<a href="javascript:void(0)"><span style="color: red; float: right">Delete</span></a>');

            data.context = tpl.prependTo(ul);
            tpl.find('span').click(function(){
                if(tpl.hasClass('dialog')){
                    jqXHR.abort();
                }
                tpl.fadeOut(function(){
                    tpl.remove()
                });
            });
            var jqXHR = data.submit();
        },
    });
});

And this script as index and call script above

<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
    <form action="upload.php" id="form" method="post" enctype="multipart/form-data">
        <div class="fitem">
            <label style="width: 400px">Upload Files :</label>
        </div>
        <div class="fitem" style="float: left">
            <input style="width: 65px; height: 75px; float: right" class="easyui-filebox" name="attachment[]" multiple="true" buttonText="Add Files"/>
        </div>
        <div class="easyui-panel" style="width:440px;height:75px;padding:5px;margin-top:0px">
            <p id="file_1" style="list-style-type: none; margin-top: 0px"></p>
        </div><br>
    </form>

    <button type="submit" name="submit" form="form">Send</button>
</body>
</html>

This is upload.php script

<?php
require 'mail/PHPMailerAutoload.php';
include "conn.php";

date_default_timezone_set("Asia/Jakarta");
$id = 1;
$to = '[email protected]';
$subject = 'Test';

if(isset($_POST['submit'])){
$attachment_name = $_FILES['attachment']['name'];
$attachment_type = $_FILES['attachment']['type'];
$attachment = $_FILES['attachment']['tmp_name'];

include 'smtp.php';

$mail->addAddress($to);
$mail->Subject = $subject;
$mail->msgHTML('Tes');

foreach($attachment_name as $key => $att){
    $nama_file = $attachment_name[$key];
    $tmp_file = $attachment[$key];

    $mail->addAttachment($tmp_file, $nama_file);
}

if (!$mail->send()) {
    echo '<script>alert("Failed"); </script>';
} else {
    echo '<script>alert("Success"); </script>';
}
}
?>

My problem is, when script.js is included in index, the files can't appear in email attachments. But when script.js is deleted from index, the files can appear in email attachments.

Any solution for this?

Upvotes: 0

Views: 1290

Answers (1)

Dobrin Tinchev
Dobrin Tinchev

Reputation: 381

You didn't mention which file upload plugin you're using, but all I've used handle the upload of the file to some server side callback and don't add the data to the form itself. https://github.com/blueimp/jQuery-File-Upload/wiki/Options#add

What you have to do is handle the upload in a seperate script and for example return a json with the info about the file.

Then in the success callback of the submit method add the data you need to the form so you can submit it to the script that sends the email

Upvotes: 1

Related Questions