Да не поле а 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 пришел - вот и вся была задача, зачем вы мне предлагаете то что мне не надо вообще у меня задача именно этот прикрутить вот я и думаю
|
| Часовой пояс GMT +3, время: 16:35. |