欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS上传组件FileUpload自定义模板的使用方法_javascript技巧

程序员文章站 2022-03-16 09:20:43
...
FileUpload 是国外一个纯javascript 写的大文件上传组件,该组件支持分片上传,断点续传,多文件等功能。
下面就为大家分享FileUpload上传组件自定义模板(FineUploaderBasic)的使用方法:

以下是配置代码:

前端配置:


选择文件
点击上传
取消
取消全部
暂停上传
继续上传
'); }, onUpload: function(id, fileName) { $('#file-' + id).addClass('alert-info') .html('JS上传组件FileUpload自定义模板的使用方法_javascript技巧 ' + 'Initializing ' + '“' + fileName + '”'); }, //进度条 onProgress: function(id, fileName, loaded, total) { if (loaded ' + '上传文件中......' + progress); } else { $('#file-' + id).addClass('alert-info') .html('JS上传组件FileUpload自定义模板的使用方法_javascript技巧 ' + '上传文件中...... '); } }, //上传完成后 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); }); });