AJAX $_FILES
ЗДРАВСТВУЙТЕ что удивительно
вот я передаю постом файл
function fileSelectFunc(e) {
e.stopPropagation();
e.preventDefault();
var file = e.target.files || e.dataTransfer.files;
$.ajax({
url: "/server/ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: file[0], // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
if (file[0].type.match('image/*'))
ParseFile(file[0]);
else
e.target.className = '';
}
});
POST: http://imedia.in.ua/server/ajax_php_file.php В консоли вижу POST [object ] И постом идет графический файл но в Response print_r($_POST); В обработчике пытаюсь распечатать пост array (0) |
Документацию кто читать будет?
http://fi2.php.net/manual/ru/features.file-upload.php |
это все я читал но я в тупике, ведь я не формой передаю а в javascript коде у меня уже встречается файл поэтому я не могу проверить if isset $_FILES['userfile']['name'] а проверка на $_POST и на $_FILES дает array(0)
В то время как файл в посте есть как его принять? |
Цитата:
Мало читать, нужно вникать в то, что пишется. |
Есть firebug в нем в ячейке POST показано что файл есть то есть он идет но PHP его не видит в массиве $_FILES, вы реально можете сказать как его в этом случае получить?
http://test.imedia.in.ua/main_contro...ages/portfolio |
Я вам еще раз повторяю, что файлы клиент может отправить только методом POST, у метода GET на это не хватит размера под него отведенного. А РНР возвращает информацию о загруженных по HTTP файлах ТОЛЬКО в массив $_FILES.
Если этот массив пуст, значит файл не получен сервером. Если читали руководство, там все написано - ошибки, как их получить и т.п. Проверяйте. |
Приведите пожалуйста пример, прошу вас, я там не могу найти как проверить почему сервер файл не получает
|
Отправлять надо как следует, ну и конечно анализировать ошибки, а не гадать на кофейной гуще.
<?
if($_POST) {
exit('POST '.print_r($_POST, 1).'FILES '.print_r($_FILES, 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: this.action,
type: 'POST',
contentType: false,
processData: false,
data: new FormData(this),
dataType: 'text',
success: function(data){
if(!!data){
alert(data);
}
}
});
});
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="file_name" value="name_file"/><br/>
<input type="file" name="file_body"/><br/>
<input type="submit" value="Отправить"/>
</form>
</body>
</html>
|
Формы нет никакой просто файл уже в коде javascript
как переменная как я выше написал file[0] |
А если только поле, то, отправлять тоже надо по уму, к примеру:
var data = new FormData(); data.append(this.name, this.files[0]); //.... data: data, где this ссылка на поле. |
Да не поле а file[0] это вот так
var file = e.target.files || e.dataTransfer.files; Вот обработчик
function Init() {
var fileSelect = document.getElementById('file-select'),
fileDrag = document.getElementById('image-select');
fileSelect.addEventListener('change', fileSelectFunc);
fileDrag.addEventListener('drop', fileSelectFunc);
fileDrag.addEventListener('dragover', dragOverFunc);
fileDrag.addEventListener('dragleave', dragOverFunc);
}
Вот эта функция fileSelectFunc |
function fileSelectFunc(e) {
e.stopPropagation();
e.preventDefault();
var file = e.target.files || e.dataTransfer.files;
var fileSelect = document.getElementById('file-select');
var data = new FormData();
data.append('userpic', fileSelect.files[0], 'chris.jpg');
$.ajax({
url: "/server/ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: true, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
if (file[0].type.match('image/*'))
ParseFile(file[0]);
else
e.target.className = '';
}
});
}
И все равно array(0) |
Откуда эта каша и зачем? Ну коли откуда-то выдрали и не понимаете, возьмите готовый плагин, а их наплодили уже не мало. Использовать же JQ ради ajax...
<?
if($_FILES) {
exit('FILES '.print_r($_FILES, 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('#file-select').addEventListener('change', function() {
var xhr = new XMLHttpRequest(),
data = new FormData();
data.append(this.name, this.files[0]);
xhr.open('POST', location);
xhr.onload = function() {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
xhr.send(data)
})
});
</script>
</head>
<body>
<input id="file-select" type="file" name="file"/>
</body>
</html>
Проверяйте. Отдает отчет о полученном файле? |
У меня уже готовая конструкция - форма на яваскрипте
вот она, мне надо файл на сервер отправить видите там file[0], вот как аякс туда прикрутить? В вашем случае статус 200 есть но массива $_FILES нету
(function() {
var template;
if (window.File && window.FileList && window.FileReader)
newTemplate();
else
alert("Your browser version low then needs so it dosn't support FileReader.");
function newTemplate() {
var wrapp = document.getElementById('wrapp');
template = wrapp.cloneNode(true);
Init();
}
function Init() {
var fileSelect = document.getElementById('file-select'),
fileDrag = document.getElementById('image-select');
fileSelect.addEventListener('change', fileSelectFunc);
fileDrag.addEventListener('drop', fileSelectFunc);
fileDrag.addEventListener('dragover', dragOverFunc);
fileDrag.addEventListener('dragleave', dragOverFunc);
}
function dragOverFunc(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == 'dragover' ? 'hover' : '');
}
function fileSelectFunc(e) {
e.stopPropagation();
e.preventDefault();
var file = e.target.files || e.dataTransfer.files;
if (file[0].type.match('image/*')){
ParseFile(file[0]);
var xhr = new XMLHttpRequest(),
data = new FormData();
data.append(this.name, this.files[0]);
xhr.open('POST', "/server/ajax_php_file.php");
xhr.onload = function() {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
xhr.send(data)
} else{
e.target.className = '';}
}
function ParseFile(f) {
var view = document.createElement('div'),
span = document.createElement('span');
var wrap = document.getElementById('image-wrapp'),
text = document.getElementById('text-wrapp');
wrap.className = "select";
view.id = 'image-view';
wrap.appendChild(view);
span.innerHTML = 'Uploading...';
text.children[0].style.opacity = 0;
text.insertBefore(span, text.children[1]);
ShowImage(f);
}
function ShowImage(f) {
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
var container = document.createElement('div'),
img = document.createElement('div'),
line = document.createElement('div');
var view = document.getElementById('image-view');
container.className = 'image';
img.style.backgroundImage = 'url(' + e.target.result + ')';
container.appendChild(img);
line.className = 'line';
line.addEventListener("webkitAnimationEnd", AnimationEnd, false);
line.addEventListener("animationend", AnimationEnd, false);
line.addEventListener("oanimationend", AnimationEnd, false);
view.appendChild(container);
view.appendChild(line);
}
})(f);
reader.readAsDataURL(f);
}
function AnimationEnd() {
var check = document.createElement('div'),
next = document.createElement('div'),
load = document.createElement('span');
var wrap = document.getElementById('image-wrapp'),
text = document.getElementById('text-wrapp'),
view = document.getElementById('image-view');
check.innerHTML = '<svg viewBox="0 0 50 50">' +
'<polyline points="15,25 23,31 33,15"/>' +
'</svg>';
check.id = 'check';
view.appendChild(check);
load.innerHTML = 'Upload complete!';
text.children[1].style.opacity = 0;
text.insertBefore(load, text.children[2]);
next.className = 'button next';
next.innerHTML = 'Next file';
next.addEventListener('click', nextImage, false);
wrap.appendChild(next);
}
function nextImage() {
var old = document.getElementById('wrapp');
old.addEventListener("webkitTransitionEnd", New, false);
old.addEventListener("transitionend", New, false);
old.addEventListener("oTransitionEnd", New, false);
old.style.top = '200%';
document.body.appendChild(template);
}
function New() {
document.body.removeChild(this);
newTemplate();
}
})();
|
А готовый плагин с такими же плюшками лень взять? Или хотите чтобы я догадывался что есть file-select, image-select, image-view, ...?
|
Дело в том что это нужная форма именно готовый плагин вот ссылка на готовое решение
http://test.imedia.in.ua/main_contro...ages/portfolio
<div id="wrapp">
<div id="image-wrapp">
<div id="text-wrapp">
<span>Drop image to upload</span>
</div>
<div id="image-select">
<svg viewBox="0 0 170 150">
<path d="M0,3.5 170,3.5 170,146.5 0,146.5z"/>
</svg>
</div>
</div>
<div class="button-wrapp">
<div class="button upload">
<span>Pick one</span>
<input id="file-select" type="file">
</div>
</div>
</div>
Но там я не разобрался где он на сервер отправляет вот его чистый код
(function() {
var template;
if (window.File && window.FileList && window.FileReader)
newTemplate();
else
alert("Your browser version low then needs so it dosn't support FileReader.");
function newTemplate() {
var wrapp = document.getElementById('wrapp');
template = wrapp.cloneNode(true);
Init();
}
function Init() {
var fileSelect = document.getElementById('file-select'),
fileDrag = document.getElementById('image-select');
fileSelect.addEventListener('change', fileSelectFunc);
fileDrag.addEventListener('drop', fileSelectFunc);
fileDrag.addEventListener('dragover', dragOverFunc);
fileDrag.addEventListener('dragleave', dragOverFunc);
}
function dragOverFunc(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == 'dragover' ? 'hover' : '');
}
function fileSelectFunc(e) {
e.stopPropagation();
e.preventDefault();
var file = e.target.files || e.dataTransfer.files;
if (file[0].type.match('image/*')){
ParseFile(file[0]);
else{
e.target.className = '';}
}
function ParseFile(f) {
var view = document.createElement('div'),
span = document.createElement('span');
var wrap = document.getElementById('image-wrapp'),
text = document.getElementById('text-wrapp');
wrap.className = "select";
view.id = 'image-view';
wrap.appendChild(view);
span.innerHTML = 'Uploading...';
text.children[0].style.opacity = 0;
text.insertBefore(span, text.children[1]);
ShowImage(f);
}
function ShowImage(f) {
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
var container = document.createElement('div'),
img = document.createElement('div'),
line = document.createElement('div');
var view = document.getElementById('image-view');
container.className = 'image';
img.style.backgroundImage = 'url(' + e.target.result + ')';
container.appendChild(img);
line.className = 'line';
line.addEventListener("webkitAnimationEnd", AnimationEnd, false);
line.addEventListener("animationend", AnimationEnd, false);
line.addEventListener("oanimationend", AnimationEnd, false);
view.appendChild(container);
view.appendChild(line);
}
})(f);
reader.readAsDataURL(f);
}
function AnimationEnd() {
var check = document.createElement('div'),
next = document.createElement('div'),
load = document.createElement('span');
var wrap = document.getElementById('image-wrapp'),
text = document.getElementById('text-wrapp'),
view = document.getElementById('image-view');
check.innerHTML = '<svg viewBox="0 0 50 50">' +
'<polyline points="15,25 23,31 33,15"/>' +
'</svg>';
check.id = 'check';
view.appendChild(check);
load.innerHTML = 'Upload complete!';
text.children[1].style.opacity = 0;
text.insertBefore(load, text.children[2]);
next.className = 'button next';
next.innerHTML = 'Next file';
next.addEventListener('click', nextImage, false);
wrap.appendChild(next);
}
function nextImage() {
var old = document.getElementById('wrapp');
old.addEventListener("webkitTransitionEnd", New, false);
old.addEventListener("transitionend", New, false);
old.addEventListener("oTransitionEnd", New, false);
old.style.top = '200%';
document.body.appendChild(template);
}
function New() {
document.body.removeChild(this);
newTemplate();
}
})();
|
|
У меня там форма та которая нужна относительно css html, помогите пожалуйста разобраться именно с моей задачей
|
:)
Вопрос стоял так - почему/как не отправляется/отправить файл методом ajax. Как, было показано. У вас же в "готовом" почему-то никак. А на поверку оказалось, что вы либо выдрали код из чего-то, либо я не знаю откуда он у вас появился, но готового в нем нет, там все не работает. Нельзя в вашем готовом выбрать файл для загрузки, чего отправлять? Выбор файла перетаскиванием не обязательно всегда самый удобный способ, и реализуя подобное не лишают пользователя выбора файла традиционным способом. Вот так должен работать плагин: http://borisolhor.com/?theme=drop_uploader, здесь можно и перетащить файл в цель, и выбрать его в диалоге. Ваш же код надо "ремонтировать", сами вы этого не сделаете, поэтому напрягите Гугл и найдите плагин, а их масса. Стилями же можно облагородить все что угодно и как угодно, плагины это в общем-то не запрещают. |
Да я разобраться в этом хочу, вопрос стоял так в ПОСТЕ файл есть, в яваскрипте есть файл и инпут обозначен, нужно было просто добавить правильную передачу на сервер чтобы массив $_FILES пришел - вот и вся была задача, зачем вы мне предлагаете то что мне не надо вообще у меня задача именно этот прикрутить вот я и думаю
|
Даже так, то что у вас творится на странице по ссылке вы считаете нормальным рабочим процессом?
Зачем предлагаю? Может я и не прав, но вы не понимаете много, либо пытаетесь решать все методом научного тыка. Вот простой пример, я пишу примером как отправить файл ajax: var data = new FormData(); data.append(argument_1, argument_2); вы повторяете это так: data.append(argument_1, argument_2, argument_3); Да, метод .append() может принимать три аргумента. Но если вы так пишите в коде своем, значит вы даже не представляете чем это чревато. Ваш код не есть нечто бесценное, drag&drop не работает, выбрать традиционно тоже нельзя, то есть поведение страницы при попытке загрузить файл поставит в ступор любого вашего пользователя. И к этому прикручивать? Поэтому и предлагаю - возьмите готовое, и всего-то потребуется прочесть как подключить. Все. А навести красоту вам нужную, так это как хотите. PS. я разобраться в этом хочу. Хорошо, но надо разбираться, а не тыкать бездумно, и начать с простого - отправить файл традиционно выбрав его в диалоге. Как это сделать примеры были. Далее сделать предпросмотр выбранного для загрузки, что можно сделать посредством FileReader, и таковое в вашем коде есть. Разобрались, поняли как работает, то есть не будет возникать вопросов как это можно "прикрутить" к любой ситуации. А потом таинство перетаскивания, а я давал ссылку, где можно об этом все расжованное прочесть, читайте. |
Хорошо убедили я снес тот неудачный плагин, но если коснуться принципа вот я выбрал ваш пример яваскриптовский
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('#file-select').addEventListener('change', function() {
var xhr = new XMLHttpRequest(),
data = new FormData();
data.append(this.name, this.files[0]);
xhr.open('POST', '/server/ajax_php_file.php');
xhr.onload = function() {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
xhr.send(data)
})
});
</script>
</head>
<body>
<input id="file-select" type="file" name="file"/>
</body>
</html>
У меня в ответе на var_dump($_FILES); Array(0) |
Под каким браузером проверяется?
|
Mozila
|
Если ваша лиса не времен начала создания вселенной, то к нему претензий нет. Открывайте отладчик и проверяйте сеть - POST запрос будет содержать типа такого:
-----------------------------133552468125984 Content-Disposition: form-data; name="file"; filename="С1-65.jpg" Content-Type: image/jpeg ÿØÿá´àExif��MM�*���� ����������� ���ª����� и т.д. Соответственно сервер вернет информацию о загрузке. Если клиент отдает, а сервер не принимает, значит причину нужно искать на сервере: а) ошибки в коде; б) настройки сервера. Обучение и отладку нужно производить не на удаленном сервере, а на локальном. На удаленный сервер выставляются уже готовые и отлаженные скрипты. |
laimas,
Скажите неужели может быть отключен массив файл на сервере и как включить, ПОСТ в лисе есть |
$_FILES - это, и никоим образом ее нельзя отключить.
Загрузкой файлов на сервер управляют соответствующие установки php.ini. Коли вы говорили, что читали о загрузке файлов на сервер, то должны знать это, ибо там рассказывается о директивах, которые влияют на загрузку файлов. Скачивайте с официального сайта руководство в формате СНМ, с примерами, и изучайте, это самый короткий, но самый лучший учебник по языку, бестселлер на ночь. |
| Часовой пояс GMT +3, время: 02:42. |