深圳做商城网站建设,seo超级外链工具,网页设计 欣赏,网站负责人不是法人上一篇文章介绍文件上传模块使用示例时介绍了done和error事件#xff0c;这两个事件是在文件上传成功#xff08;原文#xff1a;在上传接口请求完毕后触发#xff0c;但文件不一定是上传成功的#xff09;及上传失败#xff08;原文#xff1a;请求上传出现异常#x… 上一篇文章介绍文件上传模块使用示例时介绍了done和error事件这两个事件是在文件上传成功原文在上传接口请求完毕后触发但文件不一定是上传成功的及上传失败原文请求上传出现异常时触发。除了这两个事件文件上传模块还支持其它几种事件可以实现文件预览、显示上传文件列表等功能。 选择文件后会触发choose事件文件上传前会触发before事件这两个事件中choose事件在前before事件在后可以在这两个事件中实现图片预览、显示文件列表、弹出等待窗口等操作。注意处理这两类事件时一般需要将auto属性设置为false。 图片预览的示例代码及效果如下所示 button typebutton classlayui-btn idtest选择文件/button divimg idimgPreview stylewidth: 100px;height: 100px/divscriptlayui.use([upload,layer], function(){var upload layui.upload;var layer layui.layer;var $ layui.jqueryvar uploadInst upload.render({elem: #test ,url: http://localhost:5098/ECData/UploadFile/ ,auto:false,done: function(res){layer.alert(文件上传完毕); },error: function(){layer.alert(文件上传失败); },choose: function(obj){obj.preview(function(index, file, result){$(#imgPreview).attr(src, result); }); }});});/script显示文件列表的示例代码及效果如下所示代码参考自参考文献3
button typebutton classlayui-btn idtest选择文件/button
div classlayui-upload-list stylemax-width: 1000px;table classlayui-tablecolgroupcolcol width150col width260/colgrouptheadtrth文件名/thth大小/thth类型/th/tr/theadtbody iddemoList/tbody/table
/div
scriptlayui.use([upload, layer], function() {var upload layui.upload;var layer layui.layer;var $ layui.jqueryvar uploadInst upload.render({elem: #test,elemList: $(#demoList) ,url: http://localhost:5098/ECData/UploadFile/,auto: false,multiple: true,done: function(res) {layer.alert(文件上传完毕);},error: function() {layer.alert(文件上传失败);},choose: function(obj) {var that this;var files this.files obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function(index, file, result) {var tr $([tr idupload- index , td file.name /td, td (file.size / 1024).toFixed(1) kb/td,tdfile.type/td/tr].join());that.elemList.append(tr);});}});});
/script文件上传过程中会触发progress用于显示或处理文件上传进度信息其事件响应函数的形式为function(n, elem, res, index)其中n为进度百分比elem为触发的元素 DOM 对象res为progress 响应信息index为当前上传文件的索引。progress事件的响应示例代码及效果如下所示
button typebutton classlayui-btn idtest选择文件/button
label上传进度span idprogress/span/label
scriptlayui.use([upload, layer], function() {var upload layui.upload;var layer layui.layer;var $ layui.jqueryvar uploadInst upload.render({elem: #test,url: http://localhost:5098/ECData/UploadFile/,accept:file,auto: true,done: function(res) {layer.alert(文件上传完毕);},error: function() {layer.alert(文件上传失败);},progress: function(n, elem, res, index){$(#progress).html(n%);}});});
/script除了上述事件layui的文件上传模块还支持触发多文件上传完毕事件allDone同时支持重新上传、跨域上传等详细介绍请见参考文献2.
参考文献 [1]B站layui框架精讲全套视频教程 [2]https://layui.gitee.io/v2/docs/ [3]https://layui.gitee.io/v2/demo/ [4]https://github.com/layui/layui/
