js 编写上传控件

 
27人阅读 评论(0) 收藏 举报

function UploadFile(){}

UploadFile.prototype={

multiupload:false,

intervale:2000000,

enable:true,

 synchro:false,

GetFileName:function(filepath){ return filepath.substr(filepath.lastIndexOf('//')+1); },

OnInit:function(objId){//初始化方法。

var FileList_Ul=document.getElementById(objId);

 if(FileList_Ul!=null){

if(FileList_Ul.parentNode.childNodes[1]!=null){

 file_obj=FileList_Ul.parentNode.childNodes[1];

var jsonmsg=file_obj.value;

var jsonobj=eval(jsonmsg);

var htmlmsg="";

if(jsonobj!=null&&jsonobj.length>0){

for(var i=0;i"+jsonobj[i].realname+"("+jsonobj[i].filesize+")删除"; }

 FileList_Ul.innerHTML=htmlmsg; } if(FileList_Ul.childNodes.length>0) FileList_Ul.style.display="";

}

}

},

onSetJson:function(FileList_Ul){//通过json数据初始化。

var jsonmsg="";

if(FileList_Ul.childNodes.length>0){

 for(var i=0;iparseInt(filesize/this.intervale))

loadcount=parseInt(filesize/this.intervale)+1;

setInterval(

 function(){

 if(FileList_Ul.childNodes.length>0){

var pargressUl=FileList_Ul.childNodes[FileList_Ul.childNodes.length-1].childNodes[1];

 if((pargressUl!=null&&pargressUl.childNodes.length>0)&&loadindex<=loadcount){

 pargressUl.childNodes[0].style.width=(pargressUl.clientWidth*loadindex/loadcount)+"px"; loadindex++;

}

}

},

500);

},

OnUpload:function(obj){//上传的方法

if(obj!=null){

 var FileList_Ul=obj.parentNode.parentNode.parentNode.nextSibling.childNodes[0];

if(FileList_Ul!=null&&FileList_Ul.tagName=="UL"){

var file_obj=obj;

if(file_obj.value!=""&&file_obj.tagName=="INPUT"){

var htmlmsg="";

var filesizeHF=FileList_Ul.nextSibling.nextSibling.value;

 if(filesizeHF==null||filesizeHF=="")

 filesizeHF=10000000;

var fileExtbool=false;

 var filefilterHF=FileList_Ul.nextSibling.nextSibling.nextSibling.value;

if(filefilterHF!="") {

var fileFileExt=GetFileExtName(file_obj.value);

var fileExts=filefilterHF.split(",");

 if(fileExts!=null&&fileExts.length>0){

 for(var i=0;i"+realname+"("+filesize+"bit)删除";

FileList_Ul.innerHTML+=htmlmsg;

}

else{

if(FileList_Ul!=null&&FileList_Ul.childNodes.length>0){

var linkbtn=FileList_Ul.childNodes[0].childNodes[FileList_Ul.childNodes[0].childNodes.length-1];

 if(linkbtn!=null&&linkbtn.tagName=="A"){ uploadobj.DelFile(linkbtn);

}

}

htmlmsg=""+realname+"("+filesize+"bit)删除";

FileList_Ul.innerHTML=htmlmsg;

}

FileList_Ul.style.display="";

uploadobj.onPargress(FileList_Ul,filesize);

uploadobj.onSetJson(FileList_Ul);

 }

},

error: function (data, status, e) { alert(e); } });

}

 else{

alert("上传的文件的后缀名不正确");

}

}

else{

alert("请选择要上传文件","操作提示");

}

if(FileList_Ul.childNodes.length>0){ FileList_Ul.style.display=""; }

}

}

}

 }

//截取文件的后缀名。

function GetFileExtName(filename){

 var index1=filename.lastIndexOf(".");

var index2=filename.length;

var postf=filename.substring(index1,index2);

//后缀名

return postf;

 }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 以下是使用layui编写上传文件页面的示例代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上传文件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">上传文件</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传文件 </button> </div> </div> </form> </div> </div> </div> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['upload', 'element'], function(){ var upload = layui.upload; var element = layui.element; //执行实例 var uploadInst = upload.render({ elem: '#test1', //绑定元素 url: '/upload/', //上传接口 done: function(res){ //上传完毕回调 }, error: function(){ //请求异常回调 } }); }); </script> </body> </html> ``` 在这个示例代码中,我们使用了Layui的上传组件,使用`upload.render`方法来初始化上传组件,其中: - `elem`参数指定绑定上传文件的元素,这里我们使用了一个按钮元素。 - `url`参数指定上传文件的接口地址。 - `done`和`error`参数分别指定上传成功和上传失败后的回调函数。 注意,在使用Layui的上传组件时,需要同时引入Layui的`upload`和`element`模块。 当用户点击上传文件按钮后,上传组件会自动弹出文件选择框,用户选择好要上传的文件后,上传组件会自动将文件上传到指定的接口地址,上传完成后会调用`done`回调函数。 你需要将示例代码中的上传接口地址替换为你自己的接口地址,才能使上传功能正常工作。 ### 回答2: Layui 是一款简洁、易用的前端框架,它提供了丰富的组件和接口,便于开发者快速创建美观的网页。 要编写一个上传文件页面,首先需要引入 Layui 的相关文件。可以通过 CDN 或者下载本地文件的方式引入。然后在 HTML 页面的头部加上必要的样式和脚本链接。 接着,在页面的主体部分创建一个表单,包含一个文件选择框和一个提交按钮。使用 Layui 的 form 模块可以方便地创建表单,并且提供了上传文件的功能。 在表单中,可以使用 Layui 的 upload 组件来选择文件并上传。首先需要给文件选择框定义一个 id,并在脚本中通过 layui.upload 方法初始化该组件。通过设定上传接口的 url 和一些配置项,如上传完成的回调函数,可以实现文件上传的功能。 在上传完成的回调函数中,可以对上传成功或失败的情况进行处理。如果上传成功,可以通过 alert 或者其他方式提示用户上传成功;如果上传失败,可以给出相应的错误提示。 最后,可以对页面进行美化,添加一些样式和交互效果,如上传进度条、文件预览等等。Layui 提供了丰富的组件和接口,可以根据具体需求进行定制。 总结来说,使用 Layui 编写上传文件页面的步骤为:引入 Layui 的相关文件,创建表单,使用 upload 组件进行文件选择和上传,处理上传结果,并对页面进行美化。Layui 提供了丰富的功能和易用的接口,可以帮助开发者快速创建上传文件页面。 ### 回答3: 使用layui编写上传文件页面,首先需要引入layui的相关资源文件,包括layui.css和layui.js。然后,创建一个HTML页面,并在页面中添加一个表单元素,用于选择文件。 然后,使用layui的form组件,将表单元素渲染为layui表单。定义一个按钮,用于触发文件上传操作。 接下来,使用layui的upload组件,初始化文件上传操作。通过传入一些配置参数,如上传接口、文件类型等来实现文件上传功能。在上传成功后,可以通过回调函数来处理上传成功后的操作,例如刷新页面或显示上传成功的提示信息。 在处理文件上传之前,可以通过layUI的element和layer组件,添加一些交互性的效果。例如,在文件上传过程中,可以使用layer组件的loading方法,显示一个加载动画,提高用户体验。 最后,使用layui的模块化加载机制,将页面中需要的模块进行引入和调用,以保持代码的整洁和易维护性。 在以上的基础上,还可以根据具体需求进行一些优化和扩展,例如添加上传进度条、限制上传文件大小等功能,以满足实际需求。最后,测试并调试上传文件页面,确保其正常运行和用户体验良好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值