Я пытаюсь выполнить задачу, которая может оказаться невозможной. Я еще не нашел того же сценария в Интернете.
У меня есть четыре поля, которые по клику вызывают функцию 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.
Цель состоит в том, чтобы в реальном времени обновлять новые данные из формы, включая загруженное изображение. (Я знаю, что мой код прост, и я добавлю его, когда это будет функционировать) Любая помощь приветствуется, спасибо!
Вы пытаетесь загрузить файл с помощью AJAX, что невозможно. Лучшим подходом было бы управлять загрузкой файла отдельно, возможно, через swf-upload
Вы не можете загружать файл через AJAX – только решение iframe с формой.
Загрузка файла через AJAX невозможна. Он не поддерживается XMLHttpRequest . вы можете использовать flash или использовать iframe в качестве цели.
Имеет ли ваша форма enctype="multipart/form-data" ? Загрузка файлов должна иметь атрибут, присутствующий в <form> для загрузки.
Кроме того, вы не проверяете, удалось ли загрузить файл на сервере. На минимальном минимуме вы должны иметь
if ($_FILES[$chart]['error'] === UPLOAD_ERR_OK) { ... upload worked, handle it... }
Сделайте себе одолжение и используйте Uploadify (требуется jQuery ). Это сэкономит вам часы и часы, пытаясь понять, как заставить ваши загрузки работать в стиле AJAX-ish .
Что-то проверить, установлена ли ваша форма 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/
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"); } });