文件上传input简便美化方案（需求变更）-优快云博客

通过简单的HTML、CSS及JavaScript实现了一键文件上传的功能，极大提升了用户体验。仅需点击一个按钮即可完成文件选择与上传。

编辑们嫌先选择文件，再上传文件麻烦，要求只点击一次按钮就直接上传，只好把以前的上传控件再改改。。没想到竟然更简单了~~~

html：

<form id="UploadForm" method="post" enctype="multipart/form-data">
    <div class="file-uploader-wrap">
        <input type="file" class="file-uploader"  name="uploadDataField" id="FileUploader"/>
        <div class="file-uploader-wrap-fake">
            <a href="javascript:void(0)" class="link-btn-gray4" >上传文件</a>
        </div>
    </div>
</form>

css：

.file-uploader-wrap{
    position: relative;
    width: 70px;
    height: 27px;
    margin-top: 20px;
}
.file-uploader-wrap-fake{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 27px;
}
.file-uploader-wrap .file-uploader{
    position: relative;
    width: 70px;
    height: 27px;
    filter : alpha(opacity = 0);
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

js：

window.onload = function(){

    var fileUploader = document.getElementById('FileUploader');

    if(fileUploader.addEventListener){
        fileUploader.addEventListener('change', fileUploaderChangeHandler, false);
    }else if(fileUploader.attachEvent){
        fileUploader.attachEvent('onchange', fileUploaderChangeHandler);
    }

    function fileUploaderChangeHandler(){
        uploadFile(); // 异步上传文件
    }
}