jQuery File Upload文件上传插件简单使用

前言

开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就会自动的保存在预定义变量$_FILES中,我们在后台就可以通过这个预定义变量得到前台上传的图片信息,除了这种方法还有很多插件可以实现上传图片功能的。jQuery-file-Upload就是其中一种,而且可以实现跨域传输.

jQuery-file-Upload介绍

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

使用步骤

1.引入

<!--1. 基于jquery ui-->
<script src="assets/jqueryFileupload/jquery.ui.widget.js"></script>
<!--2. 遇见跨域-->
<!--<script src="assets/jqueryFileupload/jquery.iframe-transport.js"></script>-->
<!--3. 核心文件-->
<script src="assets/jqueryFileupload/jquery.fileupload.js"></script>

  

2.准备html

<div class="form-group" style="position: relative">
<button class="btn btn-default">上传图片</button>
<input id="fileUpload" type="file" name="pic1">
<!--安置一个隐藏的input标签 用来存储图片上传成功后的图片路径 以便提交表单时 一并提交 以后就能根据路径找到这个文件了-->
<input type="hidden" name="brandLogo">
</div>
<!-- 此盒子与插件功能无关 显示上传图片的预览 未上传时时默认图 一般为灰色底图 -->
<div class="img_box">
  <img src="data:images/default.png" alt="" width="100" height="100">
</div>

3.js代码

 /*3.2 初始化 上传图片*/
$('#fileUpload').fileupload({
url:'/category/addSecondCategoryPic',
dataType:'json',
done:function (e,data) {
$('.img_box img').attr('src',data.result.picAddr);//动态修改预览图的src
$('[name="brandLogo"]').val(data.result.picAddr);//图片上传成功后 后台返回来的图片路径 前后台要约定好
$('#addCategoryForm').data('bootstrapValidator').updateStatus('brandLogo','VALID',null)
}
});

4.参数解释 

1: url:请求发送的目标url

  Type: string

  Example: '/path/to/upload/handler.json'

2.Type: 文件上传HTTP请求方式,可以选择“POST”,“PUT”或者"PATCH",

  默认"POST"

  Type: string

  Example: 'PUT'

3. dataType:希望从服务器返回的数据类型,默认"json"

  Type: string

  Example: 'json'

4. autoUpload:默认情况下,只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。

  Type: boolean

  Default: true

5. acceptFileTypes:允许上传的的文件类型

  Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上传文件大小

  Example: 999000 (999KB) //单位:B

7. minFileSize:最小上传文件大小

  Example: 100000 (100KB) //单位:B

8.previewMaxWidth : 图片预览区域最大宽度

  Example: 100 //单位:px

5.回调函数

1. add: 当文件被添加到上传组件时被触发

2. processalways: 当一个单独的文件处理队列结束(完成或失败时)触发

3. progressall: 全局上传处理事件的回调函数

4. fail : 上传请求失败时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数将不会被触发。

5. done : 上传请求成功时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数也会被触发。

6. always : 上传请求结束时(成功,错误或者中止)都会被触发。

上一篇:基于注解的Spring MVC的简单入门——简略版


下一篇:学习css之选择器优先级