jquery-uploadfile的使用「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

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

官网链接:

点击打开链接

特点：拖放支持；上传进度条；图像预览；可定制和可扩展的；兼容任何服务器端应用平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。

使用方法：

1. 需要加载的js文件：

<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/vendor/jquery.iframe-transport.js"></script>
<script src="/static/js/vendor/jquery.fileupload.js"></script>
<script src="/static/js/vendor/jquery.fileupload-process.js"></script>
<script src="/static/js/vendor/jquery.fileupload-validate.js"></script>
<script src="/static/js/vue-components/ft.attach.js"></script>

2. html代码：

<div style=”padding:10px 5px;”>

<input type=”hidden” id=”jyid” value=”${(jy.id)!”}”>

<input type=”file” name=”file” id=”upload” multiple>
<div id=”progress”>(此处为上传进度条)
<div class=”bar” style=”width: 0%;height: 4px;background: green;”></div>
</div>
<div class=”profile-info-row” id=”tblist”>

</div>

3. js代码：

$(“upload“).fileupload({

url: ‘upload’,
type: ‘POST’,
maxNumberOfFiles: 10,//最大上传文件数目
maxFileSize: 100000000,//文件不超过100M
dataType: ‘json’,//期望从服务器得到json类型的返回数据
sequentialUploads: true,//是否队列上传
progressall: function (e, data) {

var progress = parseInt(data.loaded / data.total * 100, 10);
top.$(‘#progress .bar’).css(
‘width’,
progress + ‘%’
);
},
done: function (e, data) {

tips(“上传成功”,’success’);
loadTb();
},
processfail: function (e, data) { //失败
tips(‘出错’,’error’);
}

});

//文件上传前触发事件
uploader.bind(‘fileuploadsubmit’, function (e, data) {

data.formData = { jyid: $(“#jyid”).val() }; //如果需要额外添加参数可以在这里添加

});

4.API

4.1 Initialization：

在上传按钮上调用fileupload()方法;

示例：

$('#fileupload').fileupload();

4.2 Options :

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

4.3 Callback Options:

使用方法一：函数属性

实例：

        $(

        '#fileupload'

        ).fileupload({

        　　drop: 

        function

        (e, data) {

        　　$.each(data.files, 

        function

        (index, file) {

        　　alert(

        'Dropped file: '

        + file.name);
       
        　　});
       
        　　},
       
        　　change: 

        function

        (e, data) {

        　　$.each(data.files, 

        function

        (index, file) {

        　　alert(

        'Selected file: '

        + file.name);
       
        　　});
       
        　　}
       
        　　});

使用方法二：绑定事件监听函数

　　实例：

$(
'#fileupload'
)

　　　　.bind(
'fileuploaddrop'
,
function

(e, data) {

/* ... */
})

　　　　.bind(
'fileuploadchange'
,
function

(e, data) {

/* ... */
});

每个事件名称都添加前缀：”fileupload”;

注意推荐使用第二种方法。

常用的回调函数：

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

1	`$(` `'#fileupload'` `).bind(` `'fileuploadadd'` `,` `function` `(e, data) {` `/* ... */` `});`

或者$(‘#fileupload’).on(‘fileuploadadd’, function (e, data) {/* … */});

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

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

Example:

        $(

        '#fileupload'

        ).on(

        'fileuploadprogressall'

        , 

        function

        (e, data) { 

        //进度条显示
       
        var

        progress = parseInt(data.loaded / data.total * 100, 10);
       
        $(

        '#progress .progress-bar'

        ).css(
       
        'width'

        ,
       
        progress + 

        '%'
       
        );
       
        });