Вход • Регистрация

Добавление файлов перетаскиванием

  •
  • 19 февраля 2016 г.
  • я так понимаю, что просто при перетаскивании путь к файлу должен в поле типа type='files' записываться, а при нажатии кнопки отправить уже работать стандартный функционал движка
    •
    • 20 февраля 2016 г.
    • если прикрутить стандартный функционал то там просто, геморой только при отправки файлов на сервер ajax`ом,
      А стандартный функционал по-моему перезагружает страницу, сча допишу скриптик
    •
    • 20 февраля 2016 г. , редакция: 20 февраля 2016 г.
    • В общем суть такая:
      из-за соображений безопасности путь к файлу, который получен браузером путем drag-and-drop получить нельзя.
      Поэтому можно сделать так:

      1. добавить файл в браузер, разобрав его на имя и данные
      2. затем записать эти данные в скрытые поля
      3. на сервере собрать данные и имя файла и записать файл

      js обработчик этого всего https://jsfiddle.net/wcLubgz5/1/
      php
      Код

      // имя файла
      $fileName = $_POST['.fileName'];
      // данные из файла
      $data= $_POST['.fileData'];
      // папка для записи файла
      $dir = $_SERVER['DOCUMENT_ROOT'] . '/userfiles/doc';

      // создание папки, если её нет
      if (!file_exists($dir)) mkdir($dir, 0755, true);

      if ($data) {
      // == копирование файла в папку
      // - открытие файла на чтение
      $fp1 = fopen($data, 'r');
      $contents = stream_get_contents($fp1);
      // - сохранение файла
      file_put_contents("{$dir}/{$fileName}", $contents);


      Код не тестил, скорее всего пашет
  •
  • 24 февраля 2016 г.
  • Сделал вот так:

    Код


    $(document).ready(function() {

    /*---------------------INPUT FILES---------------------*/

    var wrapper = $( ".file_upload" ),
    inp = wrapper.find( "input" ),
    btn = wrapper.find( "button" ),
    lbl = wrapper.find( "div" );
    btn.focus(function(){
    inp.focus()
    });
    // Crutches for the :focus style:
    inp.focus(function(){
    wrapper.addClass( "focus" );
    }).blur(function(){
    wrapper.removeClass( "focus" );
    });

    // Yep, it works!
    btn.add( lbl ).click(function(){
    inp.click();
    });
    // Crutches for the :focus style:
    btn.focus(function(){
    wrapper.addClass( "focus" );
    }).blur(function(){
    wrapper.removeClass( "focus" );
    });
    var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    inp.change(function(){
    var file_name;
    if( file_api && inp[ 0 ].files[ 0 ] )
    file_name = inp[ 0 ].files[ 0 ].name;
    else
    file_name = inp.val().replace( "C:\\fakepath\\", '' );

    if( ! file_name.length )
    return;

    if( lbl.is( ":visible" ) ){
    lbl.text( file_name );
    btn.text( "Выбрать" );
    }else
    btn.text( file_name );
    }).change();
    $( window ).resize(function(){
    $( ".file_upload input" ).triggerHandler( "change" );
    });


    });



    CSS

    Код


    .file_upload{
    position: relative;
    overflow: hidden;
    font-size: 1em; /* example */
    height: 2em; /* example */
    }
    .file_upload > button{
    float: right;
    width: 8em; /* example */
    height: 100%
    }
    .file_upload > div{
    text-align:center; font-size:13px; vertical-align:bottom; height:190px;
    padding:130px 0 0 0;
    }
    .file_upload > div span {color:#3e5bea; text-decoration:underline;}
    .file_upload input[type=file]{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(20);
    letter-spacing: 10em; /* IE 9 fix */
    -ms-transform: scale(20); /* IE 9 fix */
    opacity: 0;
    cursor: pointer
    }
    .file_upload{
    display: block;
    position: relative;
    overflow: hidden; /* example */
    height: 190px;
    background:#f2f2f2 url(../images/drop_file.png) center top no-repeat;
    -moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    }
    .file_upload button, .file_upload > mark{
    display: block;
    cursor: pointer /* example */
    }
    .file_upload button{
    float: right;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 1px;
    overflow:hidden;
    text-indent:-500px; /* example */
    height: 100%;
    text-align: center; border:0;
    background:#f2f2f2;
    }
    .file_upload > mark{
    background: transparent;
    }


    HTML
    Код
    <div class="file_upload">
    <button type="button">Выбрать</button>
    <div>Перетащите файлы сюда,<br>
    или <span>выберите</span> на компьютере</div>
    <input type="file" name="attachments37[]" >
    </div>


    И заработало как надо.

    АЛЕКСАНДР (LEBONNET) Спасибо за участие.

Новости

  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля, среда
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
Все новости