Question

我想自定义input =“file”，如下所示： 1.用户将点击大图片而不是经典按钮“浏览” 2.在选择文件后立即提交表格，因此用户无需提交另一个按钮，（我想在选择文件对话框中“打开”事件“

我会感激任何帮助

我在这里尝试了解决方案： How to customize <input type="file">?

但是这在IE中不起作用，当你点击图片时它也在Chrome中，它不在隐藏按钮之上 - 它不起作用。

Answer 1

HTML中没有可以自定义文件输入的功能，因此技术是将输入标记绝对放在您要设置opacity=0的任何元素上，然后可以添加{{1元素（省略通常的onClick="$("#submit-button").click()"）。我以前从未手动实现过这种技术，但可以想象表单可能在文件准备好之前发布，在这种情况下你可能需要使用return false函数给浏览器足够的时间来弄清楚自己（确保测试所有大小的文件。）

this帖子提供了一些额外的细节，我个人使用JQuery插件Javanto/JQuery-fileinput，用你指定的任何内容“替换”（使用上面的技术）输入。

Answer 2

这是我全功能的自定义文件上传/附件使用jquery＆amp; 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

享受:)

自定义文件上传

2 个答案: