Загрузка файла HTML с использованием скриптов AJAX и PHP - помогите?

Question

Я пытаюсь выполнить задачу, которая может оказаться невозможной. Я еще не нашел такой сценарий в интернете.

У меня есть четыре поля, которые, по щелчку, будут вызывать функцию Javascript, которая вызывает AJAX для данных из файла PHP.

В конечном итоге поля будут заполнять строку в базе данных, и PHP запросит новый набор данных, и пользователь увидит его. Часть данных - это изображение, которое пользователь может щелкнуть и развернуть.

Вызов AJAX работает, расширяющееся изображение работает, но добавление этого изображения через загрузку - нет, что разрушает все.

Вот фрагмент HTML-формы:

Entry: <input type='text' id='entry' />
Stop: <input type='text' id='stop' />
Final: <input type='text' id='final' />
Chart: <input type='file' id='chart' value='Get Chart'/>
<input type='button' onclick='addResult()' value='Add' />

addResult () обрабатывает такие вещи:

var entry = document.getElementById('entry').value;
var stop = document.getElementById('stop').value;
var final = document.getElementById('final').value;
var chart = document.getElementById('chart').value;
var queryString = "?entry=" + entry + "&stop=" + stop + "&final=" + final + "&chart=" + chart + "&loggedIn=true";
ajaxRequest.open("GET", "addResult.php" + queryString, true);

Ничего особенного, просто взять данные и отправить их в addResult.php для ответа. Вот процесс обработки данных загрузки «диаграммы» в addResult.php:

$chart = $_GET['chart'];
$chart_loc = "../img/".basename($_FILES[$chart]['name']);
move_uploaded_file($_FILES[$chart]['tmp_name'], $chart_loc);
if(($entry != "") && ($stop != "") && ($final != "") && ($chart_loc != "")){
           mysql_query("INSERT INTO resultsMod VALUES (now(),'".$entry."','".$stop."','".$final."','".$chart_loc."')") or die(mysql_error());
        }

Когда я нажимаю кнопку «Добавить», ничего не происходит, и до того, как я добавил поле для загрузки файла, все работало нормально. Поэтому я, должно быть, что-то делаю не так с обработкой файла.

Я никогда раньше не работал с данными для загрузки, поэтому я не знаю, разрешена ли такая отправка (без отправки формы и просто передачи данных файла через Javascript в файл php). Я также могу делать что-то неправильно с функцией move_uploaded_file.

Цель курса - в реальном времени обновлять новые данные из формы, в том числе загруженное изображение. (Я знаю, что мой код прост, и я добавлю к нему, как только это станет функциональным) Любая помощь приветствуется, спасибо!

Answer 1

Имеет ли ваша форма enctype="multipart/form-data"?Для загрузки файла должен быть указан атрибут в теге <form>.

Кроме того, вы не проверяете, была ли загрузка файла успешной на сервере.Как минимум, вы должны иметь

if ($_FILES[$chart]['error'] === UPLOAD_ERR_OK) {
      ... upload worked, handle it...
}

Answer 2

Загрузка файла через AJAX невозможна.Это не поддерживается XMLHttpRequest.Вы можете использовать flash или использовать iframe в качестве цели.

Answer 3

Вы пытаетесь загрузить файл с использованием AJAX, что невозможно.Наилучшим подходом было бы управлять загрузкой файлов отдельно, возможно, через swf-upload

Answer 4

Вы не можете загрузить файл через AJAX - единственным решением является iframe с формой.

Answer 5

you can upload the files via ajax to php script. The following should work for that.

var file_data = $("#file_field_id").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data)
form_data.append("user_id", 123) // adding additional form field values
$.ajax({
                url: "server.php",
                dataType: 'script',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         // Setting the data attribute of ajax with file_data
                type: 'post',
                success: function(data, textStatus, jqXHR){
                    if(data)
                     {
                        // some process


                },
                error:function(jqXHR, textStatus, errorThrown){
                alert("errorThrown"); 


        }
       }); 

Answer 6

Сделайте себе одолжение и используйте Uploadify (Требуется jQuery ).Это сэкономит вам часы и часы попыток выяснить, как заставить загруженные файлы работать AJAX-ish.

Answer 7

Что-то проверить, ваша форма enctype="multipart/form-data" установлена? Это приведет к тому, что изображение не будет загружено. Просто идея.

Кроме того, является ли JQuery вариант? Если это так, вы можете сделать что-то вроде этого:

$.ajaxFileUpload({
        url:'addResult.php?type=' + queryString,
        secureuri:false,
        fileElementId: INPUTIDHERE,
        dataType: 'json',
        success: function (data, status)
        {
            // done - run some code
        },
        send: function(data)
        {
        },
        error: function (data, status, e)
        {
            console.debug(data);
        }
    }
)

Понадобится эта библиотека: http://jsfiddle.net/SYZqL/