Joomla 3.0自定义模块：在ajax提交的表单上上传文件

Question

Currently I'm developing a custom module, containing a form and submitted 'through' ajax.

the field

<input type="file" id="file" name="file" accept="image/*" disabled="disabled" />

ajax submit (with json)

$.ajax({
        type: "POST",
        url: "modules/mod_custom_form/submit_form.php",
        data: dataString,
        dataType: "JSON",
        timeout: 6000,
        success: function(response) {
            // on success
            if (response.success === 1) {                
                  $('#customForm').html("<div id='message'></div>"); 
              $('#message').html("<h2>Form sent!</h2>")
              .append("<p>More text.</p>")
              .hide()
              .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='modules/mod_custom_form/images/check-icon.png' />");
              }); 
            } 
            // on failure
            else {
                $('#customForm').html("<div id='message'></div>"); 
              $('#message').html("<h2>Failure.</h2>");
            }
        }
      }); 

submit_form.php file

// no direct access
define('_JEXEC', 1);
define( 'DS', DIRECTORY_SEPARATOR );
define( 'JPATH_BASE', $_SERVER[ 'DOCUMENT_ROOT' ] );

require_once( JPATH_BASE . DS . 'includes' . DS . 'defines.php' );
require_once( JPATH_BASE . DS . 'includes' . DS . 'framework.php' );
require_once( JPATH_BASE . DS . 'libraries' . DS . 'joomla' . DS . 'factory.php' );
$mainframe =& JFactory::getApplication('site');

// sender email
$email = 'maarten@mail.com';
$subject = 'Aanvraag';
// create the header array
$headers   = array();
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-type: text/html; charset=iso-8859-1";
$headers[] = "From: beheer <maarten@mail.com>";
$headers[] = "Bcc: beheer <maarten@mail.com>";
$headers[] = "Reply-To: Recipient Name <receiver@domain3.com>";
$headers[] = "Subject: {$subject}";
$headers[] = "X-Mailer: PHP/" . phpversion();

// get all posted data and put them in variables
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$_FILES = $_POST['uploaded_file'];

// create the full message
$message = 'email';

// send mail
if (mail($to, $subject, $message, implode("\r\n", $headers))) {
    //save file function
    getInput($_FILES);
    // return message
    echo json_encode(array('success' => 1));
    // insert the email into the database
    $database =& JFactory::getDBO();
    $query = "INSERT INTO #__email_forms (mid, email, message) VALUES ('2', 'myemail@mail.com', '$message')";
    $database->setQuery($query);
    $database->query();
}
else {
    echo json_encode(array('success' => 0));
}

How would I implement the possibility to upload a file and save the form with ajax? I've been looking for hours, but haven't found anything useful so far.

Thanks in advance for your advice.

Answer 1

Ajax uploading of files is a tricky thing, especially if you have session data involved to ensure that the user uploading is actually permitted to do so. It get's even more dangerous when it's a public upload, as you need to do a lot more server side validations.

What I typically use for ajax upload is the Ajax File Uploader by valums here: https://github.com/valums/file-uploader

It's pretty straightforward to get running, and it has a jQuery plugin for it as well to make it even simpler (since you're already using jQuery).