Форум

imedia · #11 (**permalink**) 03.01.2017, 22:16

Да не поле а 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

imedia · #12 (**permalink**) 04.01.2017, 00:24

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)

laimas · #13 (**permalink**) 04.01.2017, 06:52

Откуда эта каша и зачем? Ну коли откуда-то выдрали и не понимаете, возьмите готовый плагин, а их наплодили уже не мало. Использовать же 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>

Проверяйте. Отдает отчет о полученном файле?

imedia · #14 (**permalink**) 04.01.2017, 12:41

У меня уже готовая конструкция - форма на яваскрипте
вот она, мне надо файл на сервер отправить видите там 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();
    }

})();

laimas · #15 (**permalink**) 04.01.2017, 12:55

А готовый плагин с такими же плюшками лень взять? Или хотите чтобы я догадывался что есть file-select, image-select, image-view, ...?

imedia · #16 (**permalink**) 04.01.2017, 13:10

Дело в том что это нужная форма именно готовый плагин вот ссылка на готовое решение
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();
    }

})();

laimas · #17 (**permalink**) 04.01.2017, 17:38

То есть вы считаете есть к чему "прикручивать"?

drag and drop загрузка файлов

и не морочьте голову.

imedia · #18 (**permalink**) 04.01.2017, 23:33

У меня там форма та которая нужна относительно css html, помогите пожалуйста разобраться именно с моей задачей

laimas · #19 (**permalink**) 05.01.2017, 06:07

Вопрос стоял так - почему/как не отправляется/отправить файл методом ajax. Как, было показано.

У вас же в "готовом" почему-то никак. А на поверку оказалось, что вы либо выдрали код из чего-то, либо я не знаю откуда он у вас появился, но готового в нем нет, там все не работает. Нельзя в вашем готовом выбрать файл для загрузки, чего отправлять?

Выбор файла перетаскиванием не обязательно всегда самый удобный способ, и реализуя подобное не лишают пользователя выбора файла традиционным способом. Вот так должен работать плагин: http://borisolhor.com/?theme=drop_uploader, здесь можно и перетащить файл в цель, и выбрать его в диалоге.

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

imedia · #20 (**permalink**) 05.01.2017, 20:20

Да я разобраться в этом хочу, вопрос стоял так в ПОСТЕ файл есть, в яваскрипте есть файл и инпут обозначен, нужно было просто добавить правильную передачу на сервер чтобы массив $_FILES пришел - вот и вся была задача, зачем вы мне предлагаете то что мне не надо вообще у меня задача именно этот прикрутить вот я и думаю

Форум

Справочник

Discord чат

Курсы javascript