Как с Ajax отправить файл через POST?

Question

[FulgerX2007]

Форма для обратной связи. Из формы данные отправляются на сервер с помощью AJAX и проблема в том что текст я передаю без проблем а файлы не знаю как передать.

Форма обратной связи:

<form class="form-horizontal" id="formdata">
    <fieldset>
        <legend>Обратная связь</legend>
        <div class="form-group">
            <label for="inputName" class="col-lg-2 control-label">Клиент</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" name="inputName" id="inputName" readonly value="<?=$fullname?>" >
            </div>
        </div>
        <div class="form-group">
            <label for="inputPhone" class="col-lg-2 control-label">Телефон</label>
            <div class="col-lg-10">
                <input type="text" required="required" class="form-control" name="inputPhone" id="inputPhone" placeholder="Телефон" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
            </div>
        </div>
        <div class="form-group">
            <label for="textArea" class="col-lg-2 control-label">Заявка</label>
            <div class="col-lg-10">
                <textarea class="form-control" rows="3" name="textMsg" id="textMsg"></textarea>
                <span class="help-block">Напишите развернуто вашу заявку.</span>
            </div>
        </div>
        <div class="form-group">
            <label for="textArea" class="col-lg-2 control-label"></label>
            <div class="col-lg-4">
                <input type="file" name="feedbackFile" id="feedbackFile">
            </div>
            <div class="col-md-6"></div>
        </div>
        <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
                <button type="reset" class="btn btn-default">Отмена</button>
                <button type="button" id="upload" onclick="feedbackAjax()" class="btn btn-primary">Отправить</button>
            </div>
        </div>
    </fieldset>
</form>

Код для отправки через AJAX:

function feedbackAjax(){

    var data = $('#formdata').serialize();
    
    $.ajax({
        url : 'apps/feedbackAjax.php',
        type : 'POST',
        processData: false,
        contentType: false,
        cache:false,
        data : data,
        success : function (msg){
            alert('Success');
        }
    });
}

PHP для приема данных из AJAX:

if(isset($_POST['idClient'])){ $idClient = $_POST['idClient']; }
if(isset($_POST['fullname'])){ $fullname = $_POST['fullname']; }
if(isset($_POST['phone'])){ $phone = $_POST['phone']; }
if(isset($_POST['message'])){ $message = $_POST['message']; }
if(!empty($_FILES)){ echo 'OK'; } else { echo 'NOT FILES';}



var_dump($_FILES);
$sourcePath = $_FILES['feedbackFile']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "files/feedback/".$_FILES['feedbackFile']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file

Как сделать отправить форму без перезагрузки страницы?

Решение: использовать функцию .serialize().

Comments

[Никита]

вы хоть .serialize() используйте, чтобы данные с формы взять. А то вообще некошерно

[FulgerX2007]

Никита: Спасибо интересное решение буду пробовать

[dwl есть]

а где же верное решение?

[FulgerX2007]

Исправил Ajax запрос и добавил id к форме

[Dmaw]

У меня такой же код работать отказывается.
Если удалить строку contentType: false, то работает как обычно, но без отправки файла.

Answer 1

[Андрей Суржиков]

Когда у меня возникла проблема загрузки файлов без перезагрузки и ифреймов - я воспользовался Base64.
Клиент (браузер) кодирует файл в строчку и отправляет POST-ом на сервер.
Особенно удобно с фотографиями.

Answer 2

[Алексей]

Можно воспользоваться библиотекой ScriptJava. Посмотреть пример вот тут