layui实现upload上传带进度条
⽂章⽬录
接触了⼀段时间的 layui 之后，了解了进度条 progress 模块和上传 upload 模块之后就想着能不能结合这两者整⼀个带进度条的上传功能。
⼀、修改layui包下的upload.js模块
使⽤ layui 的模块化加载（layui.js），需修改modules/upload.js，修改 p.prototype.upload ⽅法下 layui.each 内的 i.ajax ⽅法，添⼊代码如下红框内所⽰所的组词有哪些
xhr: l.xhr(function (e){
var percent = Math.floor((e.loaded / e.total)*100);
l.progress(percent);
}),
⼆、页⾯代码
监听 xhr 也就是 XMLHttpRequest ，ajax的核⼼技术就是这个！
参考：
前端界⾯
<head>
<title>upload上传</title>
<link href="Content/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<div class="layui-form">
<div class="layui-form-item layui-col-lg6">
active网名什么意思<label class="layui-form-label">上传⽂件</label>
<div class="layui-input-block">
<div class="layui-upload-list">
<!--⽂件选择框-->
<div class="layui-upload-drag UploadBusi">
<div lay-filter="UploadToolsOne">
<i class="layui-icon" > </i>
<p>点击上传，或将⽂件拖拽到此处</p>
</div>
<span id="demo2"class="layui-form-label layui-hide" ></span>
<img id="demo1"class="layui-upload-img layui-hide" />
</div>
<!--进度条样式-->
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
</div>
<div class="layui-inline">
<input id="uploadPicOne" type="button"class="layui-btn"value="上传"/>
</div>
</div>
</div>
</div>
<script src="Content/layui/layui.js"></script>
</body>
附带上 xhr 监听⽅法显⽰ progress 进度条的 js 代码，包含监听函数、⽂件上传实例，以通过⽂件保存接⼝实现⽂件上传功能。
<script>
layui.use(['form','upload','element','layer','jquery'], function (){
var upload = layui.upload, $ = layui.jquery, element = layui.element, layer = layui.layer;
//创建监听函数
var xhrOnProgress = function (fun){
//使⽤闭包实现监听绑
return function (){
//通过$.ajaxSettings.xhr()；获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if(progress !=='function')
return xhr;
//如果有监听函数并且xhr对象⽀持绑定时就把监听函数绑定上去
progress && xhr.upload){
progress = progress;
jquery下载文件进度条}
return xhr;
}
}
//执⾏实例
setvalidatorvar uploadInit = der({
elem:'.UploadBusi'//绑定元素
, method:'post'
, url:'/handle/layer_upload_busi.ashx'//上传接⼝
,
accept:'file'
, auto:false//选择⽂件后不⾃动上传
, bindAction:'#uploadPicOne'//指向⼀个按钮触发上传
, xhr: xhrOnProgress //传⼊监听函数！important
, progress: function (value){
console.log("进度："+value+'%');
element.progress('demo',value+'%');
}
, choose: function (obj){
element.progress('demo','0%');
//预读本地⽂件⽰例，不⽀持ie8
var uploadFileInput = $(".layui-upload-file").val();
var uploadFileName = uploadFileInput.split("\\");
$('#demo2').text(uploadFileName[uploadFileName.length -1]);
$('#demo2').removeClass("layui-hide");
$('div[lay-filter="UploadToolsOne"]').addClass("layui-hide");
$('#uploadPicOne').removeClass("layui-hide");
}
, before: function (obj){
layer.load();
}
, done: function (res, index, upload){织梦转移到易优版权
/
/上传完毕回调
de =="0"){
if(res.msg.split(':')[0]=="OK"){
web入门到精通pdf$('#demo1').attr('src', res.src);
$('#uploadPicOne').addClass("layui-hide");
layer.msg(res.msg.split(':')[1],{ icon:1, time:2000, shift:1});
}
if(res.msg.split(':')[0]=="Error"){
layer.msg(res.msg.split(':')[1],{ icon:5, time:2000, shift:6});
}
}
layer.closeAll('loading');//关闭loading
}
, error: function (res){
//请求异常回调
//layer.msg("系统异常错误！", { icon: 5, time: 2000, shift: 6 });
element.progress('demo','0%');
layer.closeAll('loading');//关闭loading
}
});
});
</script>
调⽤上传⽂件接⼝ /handle/layer_upload_busi.ashx，此处使⽤的是⼀般处理程序上传⽂件，可依据个⼈情况使⽤不同的后端接⼝。/// <summary>
/// layer_upload_busi 的摘要说明
/// </summary>
public class layer_upload_busi : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType ="text/plain";
string pictureName ="", OK ="", Error ="";
string FilesName = context.Request.Files[0].FileName;//获取客户端上⽂件的完全限定名称
string PathName ="";
int idx1 = FilesName.LastIndexOf(".");
string UserId ="admin";//应进⾏⾝份认证，此处暂时赋值处理
if(UserId !="")
{
try
{
HttpFileCollection hfc = context.Request.Files;
if(hfc.Count >0)
{
HttpPostedFile hpf = hfc[0];
if(hpf.ContentLength >0)
{
string comId = DateTime.Now.ToString("yyyyMMddhhmmss");//实际⽣产中会使⽤⽤户的唯⼀标识符来作为识别码
string suffix1 = FilesName.Substring(idx1);//获得上传的图⽚的后缀名
pictureName = comId;
string path = context.Server.MapPath("../userupload/");
PathName = path + pictureName + suffix1;
if(!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
hfc[0].SaveAs(path + pictureName + suffix1);//保存已上载的内容
OK ="上传成功！";
}
else{ Error ="⽂件获取错误";}
}
else{ Error ="⽂件获取错误";}
}
catch(Exception ex){ Error ="系统错误："+ ex.Message;}
}
else{ Error ="登录信息失效，请重新登录！";}
StringWriter sw =new StringWriter();
JsonWriter writer =new JsonTextWriter(sw);
writer.WriteStartObject();
writer.WritePropertyName("code"); writer.WriteValue(0);
writer.WritePropertyName("msg");
if(OK !=""){ writer.WriteValue("OK:"+ OK);}
else{ writer.WriteValue("Error:"+ Error);}
writer.WritePropertyName("src");
writer.WriteValue(PathName);
writer.WriteEndObject();
writer.Flush();
string jsonText = sw.GetStringBuilder().ToString();
context.Response.Write(JsonConvert.SerializeObject(jsonText));
/
/{"code":0,"msg":"OK：上传成功！","src":"E:\\…\\userupload\\20191018054139-1.jpg"}
}
public bool IsReusable
{
…
}
}
运⾏效果：
选择图⽚后效果：
点击上传成功后效果：
代码⽐较陈旧，考虑不周的地⽅，欢迎指正。参考：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论