layui如何集成文件服务器,layui使用upload组件实现文件上传功能

layui使用upload组件实现文件上传功能

发布时间：2020-05-22 17:25:25

来源：亿速云

阅读：309

作者：鸽子

背景：页面上一个按钮，点击弹出上传框，从按钮的方法代码开始写：处理未选择文件阻止上传；通过判断选择文件的数量，显示或隐藏上传按钮；

在js中定义：function uploadFile(){

layer.open({

type:1,

title:'上传文件‘,

area:['25%','400px'],

content:'

‘，

btn:['关闭'],

btn1:function(idx,ele){

layer.closeAll();

}

})

createUpload();

}

var files ;

function createUpload(){

$("#uploadbtn").hide();

$("#chooseFile").next().next("span").text("");

layui.use(['upload'],function(){

var uploadInst = upload.render({

elem:'#chooseFile',

url:' ',

accept:'file',

auto:false,

multiple:true,

acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

exts:'xls|xlsx',

size:1024000,

number:5,

bindAction:'#uploadbtn',

choose:function(obj){

files = this.files = boj.pushFile();

if(Object.keys(files).length>0){ $("#uploadbtn").show(); }

obj.preview(function(index,file,result){

$("#chooseFile").siblings("span").append("

"+file.name+" ×

if(index>0) {$("#uploadbtn").show() ;}

})

allDone:function(obj){

if(obj.successful){

layer.msg(obj.total+"个文件上传成功!");

}

error:function(){

layer.alert("上传成功!");

}

})

}

function deletefile(index){

delete files[index];

$("#chooseFile").siblings("span").find("div[title="+index+"]").remove();

if(!Object.keys(files).length>0){

$("#uploadbtn").hide();

}

layui如何集成文件服务器,layui使用upload组件实现文件上传功能相关推荐

后端：Layui实现文件上传功能
今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下. 文件上传实体(UploadFile.cs) public class UploadFile{pu ...
antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度
antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图红框内的进度条无法显示当前文件上传进度于是,在网上搜索解决方案: 第一种解决方案是自 ...
对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
使用commons-fileupload-1.2.1.jar等组件实现文件上传
使用的主要jar包:commons-io-1.3.2.jar包;commons-fileupload-1.2.1.jar包:commons-lang-2.3.jar,在使用组件实现文件上传时候要注意前 ...
jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
java使用smartupload组件实现文件上传的方法
为什么80%的码农都做不了架构师?>>> 本文实例讲述了java使用smartupload组件实现文件上传的方法.分享给大家供大家参考.具体分析如下:文件上传几乎是所有网站都具 ...
Android 实现文件上传功能(upload)
文件上传在B/S应用中是一种十分常见的功能,那么在Android平台下是否可以实现像B/S那样的文件上传功能呢?答案是肯定的.下面是一个模拟网站程序上传文件的例子.这里只写出了Android部分的 ...
jsp文件通常用common_29.jsp-动态生活之用Commons-FileUpload组件控制文件上传
sizeMax):设置请求信息实体内容的最大允许的字节数 ★ public List parseRequest(HttpServletRequest req): 解析form表单中的每个字符的数据,返 ...
微信小程序之使用vant-3组件Uploader文件上传
效果图: 微信小程序之使用vant-3组件Uploader文件上传 1.把vant的weapp包加进来 2.在app.json文件里面"usingComponents"加载进来才能 ...

layui如何集成文件服务器,layui使用upload组件实现文件上传功能

layui如何集成文件服务器,layui使用upload组件实现文件上传功能相关推荐

最新文章

热门文章