带有文件的jQuery ajax表单

Question

I dont finding reason for this...so i asking help...

Form:

<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php" enctype="multipart/form-data">
     <input type="text" placeholder="Name" name="vp" id="contact-form-name" value="" style="color:#9F9F9F; font:13px Arial; float:left; width:180px; border:none; background:none; border:solid 1px #343434;"/>
     <textarea name="zinute" rows="3" cols="40" style="color:#9F9F9F; font:13px Arial; float:left; width:180px; border:none; background:none; border:solid 1px #343434;">Text</textarea>
     <div style="color:#9F9F9F; font:13px Arial; float:left; width:180px; border:none; background:none;">Photo</div>
     <input type="file" required="required" name="foto" style="color:#9F9F9F; font:13px Arial; float:left; width:180px; border:none; background:none; border:solid 1px #343434;">
     <input type="submit" class="button" id="contact-form-send" value="Siusti" style="color:#9F9F9F; font:13px Arial; float:left; width:180px; border:none; background:none; border:solid 1px #343434;" />

<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="wow.min.js"></script>

Sendemail

<?php
header('Content-type: application/json');
$status = array(
    'type'=>'success',
    'message'=>'Thank you for contact us. As early as possible  we will contact you '
);

$vp = @trim(stripslashes($_POST['vp'])); 
$zinute = @trim(stripslashes($_POST['zinute'])); 
$foto = @trim(stripslashes($_POST['foto'])); 

$uploaddir = 'image/';

$success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');

echo json_encode($status);
die;

Jquery:

var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
    });
});

I need just working image upload, dont look anything else, i will but to mysql, so help just with image upload..

Answer 1

A good code example for a PHP upload you'll find here: http://php.net/manual/en/features.file-upload.php#116293

Close your HTML form with a to prevent undesirable things happen on the page in the HTML code below the form.

In your jQuery script, you declare the variable form_status with a jQuery object $('');. This will not work. Add to your HTML code and will the variable form_status with $('div.form_status');

For a refering code example check this: http://code.runnable.com/UZKDAYo3XEw2AACX/how-to-upload-a-file-using-jquery-for-php

Tip for the next time: good Google searchwords are: "jquery php file upload example" ;-)