jQuery FileUpload 插件

在前端开辟过程当中，我们常常要上传文件，这是我们就要用 <input type="file" name="file">这是原生的写法，看起来不是很雅观。下面我们聊一种比较文雅的完成要领。

上传文件

起首，我们隐蔽的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" class="btn-upload">

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() {
          // 上传失利的回调函数，能够弹出“上传失利”之类的弹框
       },

     })

Jquery 有许多很好用的插件，逐一去进修不是很实际，只要在用到的时刻，全力去搞懂其运用要领。逐步积聚吧~~~