在前端开发过程中，我们经常要上传文件，这是我们就要用 <input type="file" name="file">这是原生的写法，看起来不是很美观。下面我们聊一种比较优雅的jQuery实现方法。

上传文件

首先，我们隐藏的input框，并将input框的click事件绑定到它上面的button元素上（通过onclick="$(this).next().click()"实现），这样我们就可以按照我们自己的喜好来设置button的样式，同时也达到了上传文件的功能。

<button type="button" onclick="$(this).next().click()">

    <i class="fa fa-upload mr-sm" aria-hidden="true"></i><span>导入</span>

</button>

<input type="file" name="file" style="display:none">

fileupload 事件

jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。 
我们这里主要说说文件上传和文件格式、 大小的要求

引入相关插件

fileupload插件是必须的，fileupload-process负责处理上传过程中各个事件的管理，fileupload-validate则是对验证的支持

<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload.js"></script>

<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-process.js"></script>

<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-validate.js"></script>

使用插件

我们可以对上传文件的大小和文件类型进行验证，并通过messages设置验证失败时的提示信息。

 $('input[name="file"]').fileupload({

       url: '上传地址',

       Type: "POST",

       autoUpload: true,

       acceptFileTypes:/\.(doc|docx)$/i,// 文件格式

       maxFileSize: 99 * 1024 * 1024, //文件大小

       // 设置验证失败的提示信息

       messages: {

       maxFileSize: 'File exceeds maximum allowed size of 99MB',

       acceptFileTypes: 'File type not allowed'

       },

       processfail: function (e, data) {

           var currentFile = data.files[data.index];

           if (data.files.error && currentFile.error) {

               // there was an error, do something about it

               console.log(currentFile.error);

           }

       },

       done: function() {

          // 上传成功的回调函数，可以弹出“上传成功”之类的弹框

       },

       fail: function() {

          // 上传失败的回调函数，可以弹出“上传失败”之类的弹框

       },

     })

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！