Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Загрузка изображений на сайт

Здравствуйте нужно загрузить несколько или одно (по выбору) изображений на сайт. скрипт есть файлы выбираются, но я не могу их передать на обработчик на php чтобы загрузить на сервер. И подскажите пожалуйста как сделать чтобы все передовалось на php  не аяксом, а просто переходило как обычно переходит форма методом пост.
Вот сам скрипт:
 
Код

jQuery(function($) {
/// определение jQuery - начало



    //объявлем 2 переменных в которые будет помещён массив файлов после выбора в поле <input type="file">

    var otzivi_files;
    var otzivi_files_tmp = [];
    function prepareUpload(event)
    {
        /*
            одна переменная временная
            в неё заносится список полученные сразу после выбора файлов
            вторая содержит весь список включая и файлы выбранные ранее
        */

        // присвоение только что выбранных файлов
        otzivi_files = event.target.files;


        // обновление общего массива файлов
        $(otzivi_files).each(function(){
         otzivi_files_tmp = otzivi_files_tmp.concat(this);
        });

        // перерисовка списка после выбора дополнительных файлов
        $(function (){
            repaint_uplod_items();
        });

    }


    /*
        эта функция отслеживает изменение поля <input type="file">
        и добавляет в общий массив выбранные файлы посредством обратного вызова
    */
    $('input[type=file]').on('change', prepareUpload);

    function repaint_uplod_items()
    {
        /*
        этот код помещён в функцию
        так как:
        после удаления элемента, происходит изменение индексов в массиве otzivi_files_tmp
        у кнопки "удалить" остаются старые индексы
        в этом случае уже нельзя правильно удалить элементы кнопками
        из-за нарушения первоначальных индексов
        поэтому, после удаления элемента, следует перерисовать их список заново.
        */

        // выбираем контейнер для списка
        var fileList = $('#fileList');

        // очищаем от предыдущего кода
        $(fileList).html('');

        // формируем визуальную таблицу из массива файлов
        var table = '<table border = "0" cellspacing = "0" cellpadding = "0"><tr>';
        for (var i=0; i < otzivi_files_tmp.length; i++) {

            // устанавливаем ссылку на текущий объект
            var this_obj = otzivi_files_tmp[i];

            // получаем ссылку на картинку для использования в img src
            try{

                /*
                    из-за бага, в сафари этот метод не работает
                    поэтому в случае неудачи, нужно пропустить этот шаг
                  ссылка на баг https://bugs.webkit.org/show_bug.cgi?id=101671
                  пример, аналогичного скрипта,
                  который тоже не работает в сафари http://blueimp.github.io/jQuery-File-Upload/
                */

                img_src = window.URL.createObjectURL(this_obj);
            } catch(e) {}


            // формируем таблицу
            // js не поддерживает переносы строки, поэтому пришлось вот так её рисовать

            table += '<td>';
            table += '<div class="image_thummb">';
            if('undefined' != typeof img_src) table += '<a class="del_uplod_image" href="#'+i+'"><img class="del_im" src="css/x.png" /></a><img src="'+img_src+'" class="im" alt="" border="0" />';
            table += '</div>';
            table += '</td>';
            table += '';
            if('undefined' != typeof img_src) img_src.onload = function(){window.URL.revokeObjectURL(img_src);} // освобождаем память выделенную под картинку

        }
        table += '</tr></table>';
        $(fileList).html(table); // выгружаем в контейнер созданную визуальную таблицу
    }




    /*
        функция которая удаляет из массива элементы
        после этого наглядно показывает удаление элемента из списка fadeOut()
        и перерисовывает таблицу выбранных файлов
        использование $('body').on('click' ... обусловлено тем,
        что ссылки эти создаются динамически на странице, что делает невозможным использование обычного click()
    */
    $('body').on('click', 'a.del_uplod_image', function(){
        if(!confirm('удалить?'))return(false); // переспрашиваем, удалить ли файл из списка
        var to_del_id = $(this).attr('href').replace('#','') * 1; // получаем индекс удаляемого файла
        if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
        {
            // проверяем массив и элемент массива на существование
            if('undefined' != typeof otzivi_files_tmp[to_del_id] && otzivi_files_tmp[to_del_id])
            {
                otzivi_files_tmp.splice(to_del_id,1);

Ответ:
Здравствуйте нужно загрузить несколько или одно (по выбору) изображений на сайт. скрипт есть файлы выбираются, но я не могу их передать на обработчик на php чтобы загрузить на сервер. И подскажите пожалуйста как сделать чтобы все передовалось на php  не аяксом, а просто переходило как обычно переходит форма методом пост.
Вот сам скрипт:
 
Код

jQuery(function($) {
/// определение jQuery - начало



    //объявлем 2 переменных в которые будет помещён массив файлов после выбора в поле <input type="file">

    var otzivi_files;
    var otzivi_files_tmp = [];
    function prepareUpload(event)
    {
        /*
            одна переменная временная
            в неё заносится список полученные сразу после выбора файлов
            вторая содержит весь список включая и файлы выбранные ранее
        */

        // присвоение только что выбранных файлов
        otzivi_files = event.target.files;


        // обновление общего массива файлов
        $(otzivi_files).each(function(){
         otzivi_files_tmp = otzivi_files_tmp.concat(this);
        });

        // перерисовка списка после выбора дополнительных файлов
        $(function (){
            repaint_uplod_items();
        });

    }


    /*
        эта функция отслеживает изменение поля <input type="file">
        и добавляет в общий массив выбранные файлы посредством обратного вызова
    */
    $('input[type=file]').on('change', prepareUpload);

    function repaint_uplod_items()
    {
        /*
        этот код помещён в функцию
        так как:
        после удаления элемента, происходит изменение индексов в массиве otzivi_files_tmp
        у кнопки "удалить" остаются старые индексы
        в этом случае уже нельзя правильно удалить элементы кнопками
        из-за нарушения первоначальных индексов
        поэтому, после удаления элемента, следует перерисовать их список заново.
        */

        // выбираем контейнер для списка
        var fileList = $('#fileList');

        // очищаем от предыдущего кода
        $(fileList).html('');

        // формируем визуальную таблицу из массива файлов
        var table = '<table border = "0" cellspacing = "0" cellpadding = "0"><tr>';
        for (var i=0; i < otzivi_files_tmp.length; i++) {

            // устанавливаем ссылку на текущий объект
            var this_obj = otzivi_files_tmp[i];

            // получаем ссылку на картинку для использования в img src
            try{

                /*
                    из-за бага, в сафари этот метод не работает
                    поэтому в случае неудачи, нужно пропустить этот шаг
                  ссылка на баг https://bugs.webkit.org/show_bug.cgi?id=101671
                  пример, аналогичного скрипта,
                  который тоже не работает в сафари http://blueimp.github.io/jQuery-File-Upload/
                */

                img_src = window.URL.createObjectURL(this_obj);
            } catch(e) {}


            // формируем таблицу
            // js не поддерживает переносы строки, поэтому пришлось вот так её рисовать

            table += '<td>';
            table += '<div class="image_thummb">';
            if('undefined' != typeof img_src) table += '<a class="del_uplod_image" href="#'+i+'"><img class="del_im" src="css/x.png" /></a><img src="'+img_src+'" class="im" alt="" border="0" />';
            table += '</div>';
            table += '</td>';
            table += '';
            if('undefined' != typeof img_src) img_src.onload = function(){window.URL.revokeObjectURL(img_src);} // освобождаем память выделенную под картинку

        }
        table += '</tr></table>';
        $(fileList).html(table); // выгружаем в контейнер созданную визуальную таблицу
    }




    /*
        функция которая удаляет из массива элементы
        после этого наглядно показывает удаление элемента из списка fadeOut()
        и перерисовывает таблицу выбранных файлов
        использование $('body').on('click' ... обусловлено тем,
        что ссылки эти создаются динамически на странице, что делает невозможным использование обычного click()
    */
    $('body').on('click', 'a.del_uplod_image', function(){
        if(!confirm('удалить?'))return(false); // переспрашиваем, удалить ли файл из списка
        var to_del_id = $(this).attr('href').replace('#','') * 1; // получаем индекс удаляемого файла
        if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
        {
            // проверяем массив и элемент массива на существование
            if('undefined' != typeof otzivi_files_tmp[to_del_id] && otzivi_files_tmp[to_del_id])
            {
                otzivi_files_tmp.splice(to_del_id,1);

Вопрос: Загрузка изображений на сайт

Здравствуйте нужно загрузить несколько или одно (по выбору) изображений на сайт. скрипт есть файлы выбираются, но я не могу их передать на обработчик на php чтобы загрузить на сервер. И подскажите пожалуйста как сделать чтобы все передовалось на php  не аяксом, а просто переходило как обычно переходит форма методом пост.
Вот сам скрипт:
 
Код

jQuery(function($) {
/// определение jQuery - начало



    //объявлем 2 переменных в которые будет помещён массив файлов после выбора в поле <input type="file">

    var otzivi_files;
    var otzivi_files_tmp = [];
    function prepareUpload(event)
    {
        /*
            одна переменная временная
            в неё заносится список полученные сразу после выбора файлов
            вторая содержит весь список включая и файлы выбранные ранее
        */

        // присвоение только что выбранных файлов
        otzivi_files = event.target.files;


        // обновление общего массива файлов
        $(otzivi_files).each(function(){
         otzivi_files_tmp = otzivi_files_tmp.concat(this);
        });

        // перерисовка списка после выбора дополнительных файлов
        $(function (){
            repaint_uplod_items();
        });

    }


    /*
        эта функция отслеживает изменение поля <input type="file">
        и добавляет в общий массив выбранные файлы посредством обратного вызова
    */
    $('input[type=file]').on('change', prepareUpload);

    function repaint_uplod_items()
    {
        /*
        этот код помещён в функцию
        так как:
        после удаления элемента, происходит изменение индексов в массиве otzivi_files_tmp
        у кнопки "удалить" остаются старые индексы
        в этом случае уже нельзя правильно удалить элементы кнопками
        из-за нарушения первоначальных индексов
        поэтому, после удаления элемента, следует перерисовать их список заново.
        */

        // выбираем контейнер для списка
        var fileList = $('#fileList');

        // очищаем от предыдущего кода
        $(fileList).html('');

        // формируем визуальную таблицу из массива файлов
        var table = '<table border = "0" cellspacing = "0" cellpadding = "0"><tr>';
        for (var i=0; i < otzivi_files_tmp.length; i++) {

            // устанавливаем ссылку на текущий объект
            var this_obj = otzivi_files_tmp[i];

            // получаем ссылку на картинку для использования в img src
            try{

                /*
                    из-за бага, в сафари этот метод не работает
                    поэтому в случае неудачи, нужно пропустить этот шаг
                  ссылка на баг https://bugs.webkit.org/show_bug.cgi?id=101671
                  пример, аналогичного скрипта,
                  который тоже не работает в сафари http://blueimp.github.io/jQuery-File-Upload/
                */

                img_src = window.URL.createObjectURL(this_obj);
            } catch(e) {}


            // формируем таблицу
            // js не поддерживает переносы строки, поэтому пришлось вот так её рисовать

            table += '<td>';
            table += '<div class="image_thummb">';
            if('undefined' != typeof img_src) table += '<a class="del_uplod_image" href="#'+i+'"><img class="del_im" src="css/x.png" /></a><img src="'+img_src+'" class="im" alt="" border="0" />';
            table += '</div>';
            table += '</td>';
            table += '';
            if('undefined' != typeof img_src) img_src.onload = function(){window.URL.revokeObjectURL(img_src);} // освобождаем память выделенную под картинку

        }
        table += '</tr></table>';
        $(fileList).html(table); // выгружаем в контейнер созданную визуальную таблицу
    }




    /*
        функция которая удаляет из массива элементы
        после этого наглядно показывает удаление элемента из списка fadeOut()
        и перерисовывает таблицу выбранных файлов
        использование $('body').on('click' ... обусловлено тем,
        что ссылки эти создаются динамически на странице, что делает невозможным использование обычного click()
    */
    $('body').on('click', 'a.del_uplod_image', function(){
        if(!confirm('удалить?'))return(false); // переспрашиваем, удалить ли файл из списка
        var to_del_id = $(this).attr('href').replace('#','') * 1; // получаем индекс удаляемого файла
        if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
        {
            // проверяем массив и элемент массива на существование
            if('undefined' != typeof otzivi_files_tmp[to_del_id] && otzivi_files_tmp[to_del_id])
            {
                otzivi_files_tmp.splice(to_del_id,1);

Ответ:
Здравствуйте нужно загрузить несколько или одно (по выбору) изображений на сайт. скрипт есть файлы выбираются, но я не могу их передать на обработчик на php чтобы загрузить на сервер. И подскажите пожалуйста как сделать чтобы все передовалось на php  не аяксом, а просто переходило как обычно переходит форма методом пост.
Вот сам скрипт:
 
Код

jQuery(function($) {
/// определение jQuery - начало



    //объявлем 2 переменных в которые будет помещён массив файлов после выбора в поле <input type="file">

    var otzivi_files;
    var otzivi_files_tmp = [];
    function prepareUpload(event)
    {
        /*
            одна переменная временная
            в неё заносится список полученные сразу после выбора файлов
            вторая содержит весь список включая и файлы выбранные ранее
        */

        // присвоение только что выбранных файлов
        otzivi_files = event.target.files;


        // обновление общего массива файлов
        $(otzivi_files).each(function(){
         otzivi_files_tmp = otzivi_files_tmp.concat(this);
        });

        // перерисовка списка после выбора дополнительных файлов
        $(function (){
            repaint_uplod_items();
        });

    }


    /*
        эта функция отслеживает изменение поля <input type="file">
        и добавляет в общий массив выбранные файлы посредством обратного вызова
    */
    $('input[type=file]').on('change', prepareUpload);

    function repaint_uplod_items()
    {
        /*
        этот код помещён в функцию
        так как:
        после удаления элемента, происходит изменение индексов в массиве otzivi_files_tmp
        у кнопки "удалить" остаются старые индексы
        в этом случае уже нельзя правильно удалить элементы кнопками
        из-за нарушения первоначальных индексов
        поэтому, после удаления элемента, следует перерисовать их список заново.
        */

        // выбираем контейнер для списка
        var fileList = $('#fileList');

        // очищаем от предыдущего кода
        $(fileList).html('');

        // формируем визуальную таблицу из массива файлов
        var table = '<table border = "0" cellspacing = "0" cellpadding = "0"><tr>';
        for (var i=0; i < otzivi_files_tmp.length; i++) {

            // устанавливаем ссылку на текущий объект
            var this_obj = otzivi_files_tmp[i];

            // получаем ссылку на картинку для использования в img src
            try{

                /*
                    из-за бага, в сафари этот метод не работает
                    поэтому в случае неудачи, нужно пропустить этот шаг
                  ссылка на баг https://bugs.webkit.org/show_bug.cgi?id=101671
                  пример, аналогичного скрипта,
                  который тоже не работает в сафари http://blueimp.github.io/jQuery-File-Upload/
                */

                img_src = window.URL.createObjectURL(this_obj);
            } catch(e) {}


            // формируем таблицу
            // js не поддерживает переносы строки, поэтому пришлось вот так её рисовать

            table += '<td>';
            table += '<div class="image_thummb">';
            if('undefined' != typeof img_src) table += '<a class="del_uplod_image" href="#'+i+'"><img class="del_im" src="css/x.png" /></a><img src="'+img_src+'" class="im" alt="" border="0" />';
            table += '</div>';
            table += '</td>';
            table += '';
            if('undefined' != typeof img_src) img_src.onload = function(){window.URL.revokeObjectURL(img_src);} // освобождаем память выделенную под картинку

        }
        table += '</tr></table>';
        $(fileList).html(table); // выгружаем в контейнер созданную визуальную таблицу
    }




    /*
        функция которая удаляет из массива элементы
        после этого наглядно показывает удаление элемента из списка fadeOut()
        и перерисовывает таблицу выбранных файлов
        использование $('body').on('click' ... обусловлено тем,
        что ссылки эти создаются динамически на странице, что делает невозможным использование обычного click()
    */
    $('body').on('click', 'a.del_uplod_image', function(){
        if(!confirm('удалить?'))return(false); // переспрашиваем, удалить ли файл из списка
        var to_del_id = $(this).attr('href').replace('#','') * 1; // получаем индекс удаляемого файла
        if('undefined' != typeof otzivi_files_tmp && otzivi_files_tmp.length)
        {
            // проверяем массив и элемент массива на существование
            if('undefined' != typeof otzivi_files_tmp[to_del_id] && otzivi_files_tmp[to_del_id])
            {
                otzivi_files_tmp.splice(to_del_id,1);

Вопрос: Удаление файла не только из массива, но и из input file multiple

Здравствуйте уважаемые форумчане. Сделал свой загрузчик файлов, смысл в том, что в input type file multiple (скрытый) пользователь выбирает нужные файлы для отправки на сервер и они сохраняются в массиве, с которым дальше я и работаю. Есть предпросмотр файлов, перед загрузкой. И там же пользователь может отменить загрузку файла. Так вот проблема в том, что при удалении он из массива удаляется и на сервер не загружается, но в самом input'е он остается и если пользователь повторно выбирает этот файл, то уже событие onchange по элементу не срабатывает и файл не появляется вновь в массиве.
Какие есть идеи на этот счет? Удалять как-то из инпута элемент(так и не нашел возможно ли это), может после удаления из массива как-то обновлять инпут или еще что-то? Буду признателен за совет по решению данной проблемы
Ответ:
Сообщение от Уф
может перед тригером и очистить просто весь инпут?
Ну собственно да...
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$myBlock.find("#myFiles"+$rand).bind("change",function(e) {
        $myBlock.myPrepare(e);
      });
 
 
      var myDrop = document.getElementById("myFileList"+$rand);
      myDrop.addEventListener("dragover", function (event) {
      event.preventDefault();
    }, false);
 
        myDrop.addEventListener("drop", function (event) {
        event.preventDefault();
        LoadFiles = event.dataTransfer.files;
        $(LoadFiles).each(function(){
        upLoadFilesTmp = upLoadFilesTmp.concat(this);
        $myBlock.myUpdate();
        });
    });
 
    $('body').on('click', '[data-elem="'+$rand+'"]', function(){
        if(!confirm('Убрать файл из загрузки?'))return(false);
        var delFileId = $(this).attr('id');
        if('undefined' != typeof upLoadFilesTmp && upLoadFilesTmp.length)
        {
            if('undefined' != typeof  upLoadFilesTmp[delFileId] && upLoadFilesTmp[delFileId])
            {
              upLoadFilesTmp.splice(delFileId,1);
              $myBlock.myUpdate();
            }
        }
        return(false);
     });
По идее тогда можно для начала сохранить всё при выборе файлов в массив, а потом удалить, а потом опять создать объект input file?
Надо только посмотреть подробно, не отразится ли в какой-нибудь момент потом в работе загрузчика такое ПОЛНОЕ обнуление, ведь массив будет содержать данные, а инпут полностью пустым будет, не возникло бы конфликтов или обнуления массива... Хотя, по идее, если файлы есть в массиве, а инпут пустой и пользователь добавил файл в пустой инпут, то элемент просто добавится в массив... И вроде бы все как надо должно быть...
Хотя нет... У меня идет перебор инпута при выборе нового файла
Javascript
1
2
3
4
5
6
7
this.myPrepare = function(e) {
        upLoadFiles = e.target.files;
        $(upLoadFiles).each(function(index,value){
        upLoadFilesTmp = upLoadFilesTmp.concat(this);
        });
      this.myUpdate();
    };
Добавлено через 27 минут
сделал так:
Javascript
1
2
3
4
5
6
7
8
this.myPrepare = function(e) {
        upLoadFiles = e.target.files;
        $(upLoadFiles).each(function(index,value){
        upLoadFilesTmp = upLoadFilesTmp.concat(this);
        });
 $('#myFiles'+$rand).replaceWith($('#myFiles'+$rand).clone(true));
  this.myUpdate();
    };
Вроде бы все работает. Надо потестировать
Вопрос: Удалить выбранный файл (input file).

Подскажите пожалуйста как правильно сделать очистить файл.

<?php
echo '<input id="fileInput_1" type="file" size="75" name="file1">';
echo '<input id="fileInput_2" type="file" size="75" name="file2">';
echo '<input id="fileInput_3" type="file" size="75" name="file3">';
?>


Т.е. пользователь выбрал несколько файлов, а после чего один файл оказался ненужным. Нужна кнопка очистить.
Искал в интернете, но ничего не нашел.
Нужна помощь.
Ответ:
Сообщение от St.
При нажатие на кнопку "Удалить 2.", происходит очистка всего массива $_FILES.
Не знаю, как насчет $_FILES, но в неочищенных инпутах информация по файлам остается. (проверено в Хроме, Опере, ИЕ11, ФФ)
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    <title>Untitled Page</title>
    <script type="text/javascript">
        function test(elem) {
            alert(elem.previousElementSibling.previousElementSibling.value);
        }
        function foo(elem) {
            var prevElem = elem.previousElementSibling;

            var newElem = document.createElement('input');
            newElem.type = 'file';

            elem.parentNode.replaceChild(newElem, prevElem);
        }
    </script>
  </head>
  <body>
    <div>
      <input type="file" />
      <button onclick="foo(this)">Очистить</button>
      <button onclick="test(this)">Проверить</button>
   </div>
   <div>
      <input type="file" />
      <button onclick="foo(this)">Очистить</button>
      <button onclick="test(this)">Проверить</button>
   </div>
   <div>
      <input type="file" />
      <button onclick="foo(this)">Очистить</button>
      <button onclick="test(this)">Проверить</button>
   </div>
  </body>
</html>
Вопрос: как получить имя файла при загрузке его

надо по клику начав процесс якобы "загрузки файла на сервер" получить имя и может быть даже путь выбранного файла для использования этого имени в дальнейшем в программе - например для фоновой картинки элемента

это возможно?
Ответ: однако опять засада - не могу получить имя файла и вписать его в красную кнопку:


<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>


<style type="text/css" id="">


#файл_картинки {
	display:flex;
	width: 74px;
	height: 44px;
	border: 2px solid red;
}


</style>
<script type="text/javascript"> "use strict";

var получение_имени_картинки = function(files)
               	{
                  var file = files[0];
                  имя_файла_картинки = file.name;      
                };

var выбор_файла = function()
                {  
                   выбор_файла_картинки.click();
                   файл_картинки.textContent = имя_файла_картинки;
                };


var имя_файла_картинки;


</script> 
</head>
<body>

<span id='файл_картинки' class='кнопка_css'onclick='выбор_файла()'></span>

<input id="выбор_файла_картинки" class='скрытый' type="file" accept="image/*" onchange="получение_имени_картинки(this.files)">
       

</body>
</html>
Вопрос: Изменеие имени файла при загрузке XMLHttpRequest javascript

есть скрипт отправки на php
CODE (javascript):

  1.  
  2.  
  3.                                 var xhr = new XMLHttpRequest();
  4.                                 xhr.upload.addEventListener('progress', uploadProgress, false);
  5.                                 xhr.onreadystatechange = stateChange;
  6.                                 xhr.open('POST', 'up.php');
  7.                                 var formData = new FormData();
  8.                                 formData.append('myfiles', files[0]);
  9.                                 xhr.send(formData);
  10.  


есть массив с файлами files. Из него можно узнать files[0].name имя, размер files[0].size и тд.
Вопрос в следующем, как изменить имя у отправляемого файла? files[0].name='12345.jpg'; не катит.
Ответ:
asql, метод append поддерждиватет третий параметр - имя файла только в FF, возможно в GC. Но, кажется, не является стандартным.
Можно плопробовать создать новый файл на основе старого примерно так
CODE (javascript):

  1. var file = fileInput.files[0];
  2. var newFile = new File([file], 'newname.txt', {type: file.type, lastModified: file.lastModified});

Поддержку в браузерах естественно придется глянуть отдельно ;)

(Отредактировано автором: 03 Июня, 2015 - 12:46:41)

Вопрос: Не получается просклонять слово.

Здравствуйте. Посмотрите пожалуйста на код. Я не могу понять, где ошибка.
function declOfNum(number, titles)  
{  
    cases = [2, 0, 1, 1, 1, 2];  
    return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
}

function get_files() {
    var upload = document.getElementById('fileFF');
    var resultat = declOfNum(upload.files.length,['файл','файла','файлов']);
    $('#pupl').text('Вы выбрали' + resultat);
}


Он не выводит upload.files.length. На выходе получается : " Вы выбралифайл" .upload.files.length - это количество выбранных файлов в input file multiple. При том, что в этом коде всё работает, правда там склонения нет...
function get_files() {
    var upload = document.getElementById('fileFF');
    $('#pupl').text('Вы выбрали' + upload.files.length + ' файл');
}
Подскажите пожалуйста, как отобразить upload.files.length?
Ответ: drkrol, так?
function get_files() {
    var upload = document.getElementById('fileFF');
    var resultat = declOfNum(upload.files.length,['файл','файла','файлов']);
    $('#pupl').text('Вы выбрали ' + upload.files.length + ' ' + resultat);
}
Вопрос: Bootstrap FileInput - инициализация с предзагрузкой файла

Использую в проекте Bootstrap FileInput ( ).

Плагин всем устраивает - сама по себе загрузка в Async-режиме работает без проблем. Всё хорошо. Проблема в следующем: в проекте возникла необходимость сохранять "черновики форм". С сохранением самой формы проблем нет, а вот с загружаемыми файлами - проблема. Сохранить файлы инициированием метода upload - не проблема. Всё сохраняется на сервер. А вот потом при загрузке страницы надо в аплоадер подгрузить файлы.

Тест-файл при сохранении сохраняется в /uploads/test.jpg
Сейчас пробую так:
HTML:
<input type="file" id="t1" name="t1" class="file-input-ajax" multiple="multiple" data-signed="1">
<button id="upl">Upload</button>


let uploader_options = {
	allowedFileExtensions: ["jpg", "png", "tiff"],
	language: 'ru',
	fileActionSettings: {showUpload: false, showZoom: false},
	showUpload: false,
	uploadAsync: true,
	overwriteInitial: false,
	append: true,
	maxFileCount: 5,
	browseOnZoneClick: true,
	uploadExtraData: function () { 
		var ret = {};
		ret['field'] = $(this)[0].uploadFileAttr;
		ret['obj_type'] = 'apply';
		ret['obj_action'] = 'send';
		return ret;
	},
	uploadUrl: "/ajax/fileupload.php", 
	initialPreview: ['/uploads/test.jpg'],
	initialPreviewAsData: true,
	initialPreviewConfig: [{ caption: "test.jpg", size: 72564 }]
};

$(function() {
	var blob = null;
	var xhr = new XMLHttpRequest();
	xhr.open("GET", '/uploads/test.jpg');
	xhr.responseType = "blob";
	xhr.onload = function()
	{
		blob = xhr.response;//xhr.response is now a blob object
		console.log(blob);
		$('#t1').fileinput('AddToStack',blob);
	};
	xhr.send();

	$('#t1').fileinput(uploader_options);
	$('#upl').on('click', function(){
		$('#t1').fileinput('upload');
	});
});


Превью подгружается корректно, но при попытке upload - содержимое файла не прилетает на сервер (хотя запрос генерируется).

Подгрузка через
$('#t1').fileinput('AddToStack',blob);

Это уже "от безнадёги". Есть у кого опыт с этим плагином?

Как инициализировать с подгрузкой с сервера файлов? (причём файлы потом должны именно полноценно загрузиться ещё раз, так как идея в том, что пользователь должен иметь возможность убрать или добавить файлы после загрузки "черновика" - там могут быть как ранее сохранённые, так и вообще другой новый набор - так что надо грузить).
Ответ: забирать файлы с сервера не надо.

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

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

возможный минус - лишние издержки, если юзер выбрал файл, потом передумал и удалил, и т.д.. Навскидку, это бывает нечасто. Но если для тебя это критичный кейс и возникает чаще чем хотелось бы, то можно упороться и поддерживать смешанный список, в котором могут быть как ссылки на ранее загруженные файлы (уже на сервере), так и свежесозданные пункты, которые пока держат файл только на клиенте и зааплоадятся при сохранении черновика или создании документа.
Вопрос: Передача файла через Drop and Drag по ajax

Привет всем!

Мне нужно передать файл на загрузку через ajax запрос.
У меня возникает ошибка.
Вот так я получаю файл при перетаскивании его на поле

var file = event.dataTransfer.files[0];


Такой у меня заапрос:
jQuery.ajax({ // инициaлизируeм ajax зaпрoс
            type: 'POST', // oтпрaвляeм в POST фoрмaтe, мoжнo GET
            url: 'путь/upload.php', // путь дo oбрaбoтчикa, у нaс oн лeжит в тoй жe пaпкe
            dataType: 'json', 
            data: file, 
            success: function(data){ 
                if (data['error']) { 
                    dropZone.text('Произошла ошибка!');
                    dropZone.addClass('error');
                } else { 
                    dropZone.text('Загрузка завершена!');
                }
            }      
        });



Такой код php:

<?php
    if ($_POST) { // eсли пeрeдaн мaссив POST
        $path = ABSPATH.'wp-content/uploads/auctions/'; // директория для загрузки
        $ext = array_pop(explode('.',$_FILES['file']['name'])); // расширение
        $newimg = time().'.'.$ext; // новое имя с расширением
        $full_path = $path.$newimg; // полный путь с новым именем и расширением
        $full_pathbd = $_SERVER['SERVER_NAME'].'/wp-content/uploads/auctions/'.$newimg; 
        if(move_uploaded_file($_FILES['file']['tmp_name'], $full_path)){
            echo json_encode($full_pathbd); // вывoдим мaссив oтвeтa
            die(); // умирaeм
        } else {
            $json['error'] = 'Ошибка отправки';
        }
    } else { // eсли мaссив POST нe был пeрeдaн
        echo 'GET LOST!'; // высылaeм
    }
?>


Ошибка возникает в jQ Illegal invocation
Типа файла вот такой:
File {name: "Screenshot_4.png", lastModified: 1550586686519, lastModifiedDate: Tue Feb 19 2019 18:31:26 GMT+0400 (GMT+04:00), webkitRelativePath: "", size: 282584, …}
Ответ: Можно о клиентской стороне вопроса и обратить внимание на new FormData().

Ajax можно и JQ использовать, но так как вы делаете, файлы передаваться не будут, нужно обязательно указывать два параметра ajax - contentType: false и processData: false

Что касается серверной стороны, то так файлы от клиента принимать никак нельзя, это опасно.
Вопрос: Что происходит с удалением файлов? Удалила, а файл остался

И снова здравствуйте! Загрузила фото, потом поняла, что его надо отредактировать. Удалила фото из библиотеки файлов Вордпресс, в файловом менеджере Бегета в папке wp-content/uploads вижу, что этого фото больше нет.
Загружаю исправленное фото, но оставляю предыдущее его название - лого. Что происходит - на сайт загружается старая версия этой фотографии. Я же старую удалила, почему она продолжает возникать неоткуда?
Ответ:
Сообщение от caesarnn
Попробуйте очистить кэш Вашего браузера.
сработало! спасибо!