一个图像上传应用程序的演示，适用于大多数后端良好的动画功能。

// common function render_element(styles, el) { for (const [kk, vv] of Object.entries(styles)) { el.style[kk] = vv; } } function hoverOpacity(el) { el.addEventListener('mouseenter', function() { el.style.opacity = 0.75 }.bind(el)); el.addEventListener('mouseleave', function() { el.style.opacity = 1 }.bind(el)); } // return void event handler on setTimeout function buffer(func, time){ return e=>{ if(func.still)return; // first runtime if(!func.pft){ func(e); func.pft = true; func.still = false; return; } func.still = true; setTimeout(e=>{ func(e); func.still = false; }, time); } } // end of common const imageUploadButton = document.getElementById('image-upload-button'); imageUploadButton.addEventListener('click', e=>{ // pulse animation total time const d1 = document.getElementById('image-form'); let time = 600; if(d1.rendered){ d1.ready(); }else{ d1.ready = function(){ d1.style.display = 'flex'; d1.style.background = '#c5edd0'; this.d2.style.background = '#b4dbbf'; this.d3.style.background = '#95dea9'; this.d4.innerHTML = 'Drag and Drop or Click Above to Upload'; } let dismiss_btn = document.createElement('div'); render_element({ position: 'absolute', height: '30px', width: '30px', top: '0', right: '0', background: '#fff', borderRadius: '30px', cursor: 'pointer', margin: '2px', zIndex: '10', }, dismiss_btn); dismiss_btn.addEventListener('mouseenter', function(){this.style.background = '#fc4f30'}); dismiss_btn.addEventListener('mouseleave', function(){this.style.background = '#fff'}); dismiss_btn.addEventListener('click', ()=>{d1.style.display = 'none'}); d1.appendChild(dismiss_btn); const d3 = d1.querySelector('#image-input'); const d5 = d1.querySelector('#image-submit'); d5.style.visibility = 'hidden'; d1.parentNode.removeChild(d1); document.body.appendChild(d1); d1.removeChild(d3); let [ d2, d4, ] = Array.from({length: 3}, ()=>document.createElement('div')); let width = window.innerWidth; let d_styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', }; render_element({ position: 'fixed', left: ((width - 430) / 2).toString() + 'px', width: '430px', top: '60px', height: '280px', zIndex: '10', }, d1); render_element(d_styles, d1); render_element({ width: '90%', height: '90%', }, d2); render_element(d_styles, d2); render_element({ width: '80%', height: '70%', fontSize: '0', cursor: 'pointer', }, d3); hoverOpacity(d3); render_element(d_styles, d3); d1.appendChild(d2); d2.appendChild(d3); let tt = time / 3; let ht = tt / 2; d1.addEventListener('dragover', buffer(e=>{ d1.style.background = '#ebf9f0'; setTimeout(()=>{ d1.style.background = '#95dea9'; }, ht); setTimeout(()=>{ d2.style.background = '#b6e3c2'; setTimeout(()=>{ d2.style.background = '#c4eed2'; }, ht); }, tt); setTimeout(()=>{ d3.style.background = '#cae3d1'; setTimeout(()=>{ d3.style.background = '#9ce2b4'; }, ht); }, tt); }, time)); d2.style.flexDirection = 'column'; render_element({ fontSize: '16px', textAlign: 'center', fontFamily: 'Verdana', }, d4); d2.appendChild(d4); d3.addEventListener('change', e=>{ // backend // d5.click(); // if backend succeed, run frontend setTimeout(()=>{ d1.style.background = '#dbcea2'; setTimeout(()=>{ d2.style.background = '#dbc169'; setTimeout(()=>{ d3.style.background = '#ebc034'; }, ht); }, tt); }, time); // display backend path here // now only display filename d4.innerHTML = d3.files[0].name; }); d1.d2 = d2; d1.d3 = d3; d1.d4 = d4; d1.ready(); d1.rendered = true; } }); #image-upload-button{ width: 200px; height: 40px; background: lightgrey; display: flex; align-items: center; justify-content: center; cursor: pointer; } #image-form{ display: none; } ::-webkit-file-upload-button { visibility: hidden; } <div id="image-upload-button">Upload Image <form id="image-form" action="post"> <input id="image-input" type="file" /> <button id="image-submit" type="submit"></button> </form> </div>

按照以下步骤，你就可以为你的文件上传表单创建自定义样式了:

this is the simple HTML form(please read the HTML comments I have written here below) <form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <input type="submit" value='submit' > </form> then use this simple script to pass the click event to file input tag. function getFile(){ document.getElementById("upfile").click(); } Now you can use any type of styling without worrying about how to change default styles.

我非常清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这是非常困难的，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这里是完整的自动上传代码。

function getFile() { document.getElementById("upfile").click(); } function sub(obj) { var file = obj.value; var fileName = file.split("\\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1]; document.myForm.submit(); event.preventDefault(); } #yourBtn { position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor: pointer; } <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"> <div id="yourBtn" onclick="getFile()">click to upload a file</div> <!-- this is your file input tag, so i hide it!--> <!-- i used the onchange event to fire the form submission--> <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <!-- <input type="submit" value='submit' > --> </form>

用css隐藏它，并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值，这样用户就可以看到上传了什么。当表单提交时，间隔将清除[编辑]对不起，我一直很忙，是想更新这篇文章，这里是一个例子

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

只有CSS

使用这个非常简单和容易

.choose: -webkit-file-upload-button { 颜色:白色; 显示:inline-block; 背景:# 1 cb6e0; 边界:没有; 填充:7px 15px; 粗细:700; border - radius: 3 px; 空白:nowrap;} 光标:指针; 字体大小:10 pt; ｝ <label>附加你的屏幕短片</label> <input type="file" multiple class=" select ">

这里有一个交叉兼容的方法，可以在Chrome, Firefox, Safari和IE中工作。

$(window).on('resize',function() { var eqw = $('input[type=text]').width(); $('textarea').width(eqw - 32); $('.fileoutline').width(eqw); }).trigger('resize'); $('.file+.file').hide(); $(".file").click(function() { var input = $(this).next().find('input'); input.click(); }); $("input[id='file1']").change(function () { $('.file+.file').show(); var filename = $(this).val(); $('.filename1').html(filename); $('.file').find('span').html('CHANGE FILE'); }); $("input[id='file2']").change(function() { var filename = $(this).val(); $('.filename2').html(filename); $('.file').find('span').html('CHANGE FILE'); }); form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; } fieldset{border:0;margin:0;padding:0;} textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;} input:focus{outline:none;} input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;} input:focus{outline:0;} .fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; } input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; } .file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;} .file,.filename1,.filename2 { font-weight:200;line-height:28px;} .filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;} .file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; } ::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; } #submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;} <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="email" id="email" placeholder="Email address" /> <input type="text" type="text" name="name" id="title" placeholder="Name" /> <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div> <input type="submit" name="submit" value="Submit" id="submit"> </form>

可见性:隐藏的技巧

我通常会使用可见性:隐藏技巧

这是我设计的按钮

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

这是input type=file按钮。注意可见性:隐藏规则

<input type="file" id="upload" style="visibility:hidden;">

这是JavaScript将它们粘合在一起。它的工作原理

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>