<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./lib/jquery.js"></script>
<title></title>
</head>
<body>
<input type="file" id="file1" />
<img src="layui/css/modules/layer/default/loading-0.gif" class="loading" style="display: none;"/>
<img src="layui/css/modules/layer/default/loading-1.gif" class="loading" style="display: none;"/>
<img src="layui/css/modules/layer/default/loading-2.gif" class="loading" style="display: none;" />
<img src="./loading.gif" class="loading" style="display: none;"/>
<button id="sendFile">上传文件</button>
<script>
$(function(){
// 为发送文件按钮绑定单价事件，，判断是否上传了文件
$('#sendFile').on('click',function(){
// 【0】表示转换为原生的dom对象，使用files属性访问文件列表
var files = $('#file1')[0].files
if(files.length <=0 ){
return alert('请选择文件后再上传！')
}
// console.log('ok')
// 使用jQuery发起上传文件请求
var fd = new FormData()
fd.append('avatar',files[0])
$.ajax({
type:'post',
url:'http://www.liulongbin.top:3006/api/upload/avatar',
data:fd,
processData:false,
contentType:false,
success:function(res){
console.log(res)
}
})
})
//点击上传文件后加载图片显示
$(document).ajaxStart(function(){
$('.loading').show()
})
// 文件上传完成后加载图片消失
$(document).ajaxStop(function(){
$('.loading').hide()
})
})
</script>
</body>
</html>
//首先封装一个方法 返回一个绑定了监听函数的XMLHttpRequest对象
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var data = new FormData(); //创建一个新的表单对象
var file = $(".file_choose")[0].files[0]; //.file_choose应当为一个上传文件表单
data.append("data", file); //将文件存放至表单对象，若有其他需要提交的数据，都可以使用此方法
$.ajax({
method: 'POST', //上传方式
url: "upload_url", //上传地址
processData: false, //让ajax不要序列化data
contentType: false, //让ajax不要操作content-type
data: data, //上传的数据
//调用监听函数
xhr:xhrOnProgress(function(evt){
var percent = evt.loaded / evt.total * 100;//计算百分比
if(percent < 99.9){
percent = "已上传 " + percent.toFixed(2) + "%";
}else{
percent = "视频处理中，请稍后...";
}
$(".loading .layui-layer-content").text(percent); //将进度显示在界面
}),
success: function (data) {
$(".loading").hide();
swal({ //此处使用sweetalert插件
title: "上传成功",
type: "success",
showCancelButton: false,
confirmButtonColor: "#18A689",
confirmButtonText: "关闭",
closeOnConfirm: false
}, function () {
window.location.href="/admin/alist";
});
},
beforeSend: function() { //发送ajax前，将进度界面显示出来
$(".shade2").show();
$(".loading").show();
}
});
标签：jquery,文件,function,data,xhrOnProgress,xhr,var,上传 From： https://www.cnblogs.com/saonian/p/16718228.html