JS上传组件FileUpload自定义模板的使用方法_javascript技巧
程序员文章站
2022-03-16 09:20:43
...
FileUpload 是国外一个纯javascript 写的大文件上传组件,该组件支持分片上传,断点续传,多文件等功能。
下面就为大家分享FileUpload上传组件自定义模板(FineUploaderBasic)的使用方法:
');
},
onUpload: function(id, fileName) {
$('#file-' + id).addClass('alert-info')
.html(' ' +
'Initializing ' +
'“' + fileName + '”');
},
//进度条
onProgress: function(id, fileName, loaded, total) {
if (loaded ' +
'上传文件中......' + progress);
} else {
$('#file-' + id).addClass('alert-info')
.html(' ' +
'上传文件中...... ');
}
},
//上传完成后
onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success) {
var img = responseJSON['target']
$('#file-' + id).removeClass('alert-info')
.addClass('alert-success')
.html(' ' +
'上传成功! ' +
'“' + fileName + '”'
);
} else {
$('#file-' + id).removeClass('alert-info')
.addClass('alert-error')
.html(' ' +
'Error with ' +
'“' + fileName + '”: ' +
responseJSON.error);
}
},
onError: function(id, name, reason, maybeXhrOrXdr) {
console.log(id + '_' + name + '_' + reason);
},
}
});
//手动触发上传上传
$('#triggerUpload').click(function() {
uploader.uploadStoredFiles();
});
//取消某一个上传
$('#cancelUpload').click(function() {
uploader.cancel(0);
});
//取消所有未上传的文件
$('#cancelAll').click(function() {
//单个文件上传没有作用 因为已经在上传的不能使用这个cancelAll取消上传
uploader.cancelAll();
});
//暂停上传某个文件
$('#pauseUpload').click(function() {
uploader.pauseUpload(0);
});
// 继续上传
$('#continueUpload').click(function() {
uploader.continueUpload(0);
});
});
下面就为大家分享FileUpload上传组件自定义模板(FineUploaderBasic)的使用方法:
以下是配置代码:
前端配置:
选择文件点击上传取消取消全部暂停上传继续上传
上一篇: 封装一个自己的模块实例详解
下一篇: php asp jsp的区别