使⽤jquery.form.js实现⽂件上传及进度条前端代码
1、背景
ajax的表单提交只能提交data数据到后台，没法实现file⽂件的上传还有展⽰进度功能，这⾥⽤到form.js的插件来实现，搭配css样式简单易上⼿，⽽且⾼⼤上，推荐使⽤。
2、静态页搭建
html代码如下
<div class="upload-fileWrap">
<button type="button" id="upload-input-btn" class="lx-btn lx-btn-default-fl">选择⽂件</button>
<form id='myupload' name='myupload' action='' method='post' enctype='multipart/form-data'>
<input id="upload-input-file" class="upload-input-file" name="file" type="file" accept="audio/mpeg, audio/x-wav" data-value-update="input">
</form>
<div class="upload-file-stateWrap">
<span class="upload-file-result"></span>
<div class="progress hidden">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" >
<span class="progress-bar-status">0%</span>
</div>
</div>
</div>
</div>
需要解释下我的结构，#upload-input-file的input标签是真实的⽂件上传按钮，包裹form标签后可以实现上传功能，#upload-input-btn的button标签是展⽰给⽤户的按钮，因为需要样式的美化。上传完成⽣
成的⽂件名将会显⽰在.upload-file-result ⾥⾯，.progress 是进度条的位置，先让他隐藏加上hidden 的class，.progress-bar 是进度条的主体，.progress-bar-status 是进度条的⽂本提醒。
下⾯添加需要的css
.hidden{display:none;}
.upload-fileWrap {
margin: 3px 0 0 -2px;
position: relative;
}
.upload-input-file {
position: absolute;
left: 2px;
top: 0;
display: inline-block;
width: 88px;
height: 34px;
line-height: 34px;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.upload-file-result {
color: #a1acc6;
font-size: 14px;
}
/*进度条*/
.progressWrap {
position: absolute;
right: 20px;
top: 56px;
width: 200px;
height: 10px;
}
.progress {
width: 100%;
height: 10px;
background: #0f1529;织梦cms漏洞利用
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
}
.progress-bar {
height: 10px;
background: url("../img/progress-line.png") repeat-x; }
.progress-bar span {
position: absolute;
汇编语言指令outcolor: #58637e;
font-size: 12px;
line-height: 18px;
}
.progress-bar span.progress-bar-status {
left: 50%;
top: -23px;
margin-left: -15px;
color: #1cc3b0;
}
.
upload-file-stateWrap {
position: relative;
width: 100%;
height: auto;
}
.upload-file-stateWrap .progress {
width: 60%;
jquery下载文件请求}
.upload-file-stateWrap span.progress-bar-status {
top: inherit;
bottom: -3px;
left: 60%;
margin-left: 5px;
}
去掉hidden的class，看到的效果是这样的
3、上传⽂件脚本
jquery的find方法将上传事件绑定在file的input⾥⾯，绑定⽅式就随意了。
var progress = $(".progress-bar"),
status = $(".progress-bar-status"),
undermined是什么意思percentVal = '0%';
//上传步骤
$("#myupload").ajaxSubmit({
java按键游戏网站url: uploadUrl,
type: "POST",
dataType: 'json',
beforeSend: function () {
$(".progress").removeClass("hidden");
progress.width(percentVal);
status.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
progress.width(percentVal);
status.html(percentVal);
console.log(percentVal, position, total);
},
success: function (result) {
percentVal = '100%';
progress.width(percentVal);
status.html(percentVal);
//获取上传⽂件信息
uploadFileResult.push(result);
// console.log(uploadFileResult);
$(".upload-file-result").html(result.name);
$("#upload-input-file").val('');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
$(".upload-file-result").empty();
}
});
ajaxSubmit 插件封装的提交⽅法；
beforeSend 提交前的回调函数；
uploadProgress 提交中的回调函数，position, total, percentComplete是三个返回值，position是已经
上传完成的字节数，total表⽰总的字节数，percentComplete表⽰已完成的⽐例，打印出来如下图，就是利⽤这⾥返回的数据制作进度条的
success 表⽰上传成功的回调函数。
上传中和上传完成的截图如下：
更多⽤法可以
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论