настроить загрузку файлов

Question

Я хочу настроить input = "file" следующим образом: 1. пользователь нажмет на большое изображение вместо классической кнопки «Обзор» 2. Сразу после выбора файла он отправит форму, поэтому пользователю не нужно будет отправлять другой боттон (я хочу поймать событие «открыть» в диалоге выбора файла »

Буду признателен за любую помощь

Я попробовал предложение здесь: Как настроить ?

но это не работает в IE, также в chrome, когда вы нажимаете на изображение, где оно не находится над скрытой кнопкой - это не работает.

Answer 1

В HTML нет функций, которые могли бы настроить ввод файла, поэтому техника заключается в том, чтобы расположить тег ввода над любым элементом, который вы хотите использовать, установив opacity=0, затем вы можете добавить onClick="$("#submit-button").click()" кэлемент (опуская обычный return false).Я никогда раньше не реализовывал эту технику вручную, но могу представить, что форма может публиковаться до того, как файл будет готов, и в этом случае вам может понадобиться использовать функцию setTimeout( fn ), чтобы дать браузеру достаточно времени, чтобы разобраться (обязательно проверьтес файлами всех размеров).

этот пост дает некоторые дополнительные детали, лично я использую плагин JQuery Javanto / JQuery-fileinput , который "заменяет" (используяТехника выше) ввод с любым указанным вами содержанием.

Answer 2

Это моя полнофункциональная загрузка / вложение файла с использованием jquery & javascript (Visual studio) Это будет полезно!

<script>
 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

</script>

<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 5%;
        width: 5%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

            <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Код будет доступен в разделе комментариев!

Ссылка: https://youtu.be/It38OzMAeig

Наслаждайтесь :)