JS、JQ实现图片上传，文件上传、带进度条上传的几种方法
JS、JQ实现图片上传，文件上传、带进度条上传的几种方法
1.原生ajax上传带进度条
文件上传 原生ajax上传
运行效果如果：
2.Jquery ajax上传带进度条
文件上传 jquery上传
3.图片上传
/** 自定义文件上传方式
* @param {[object]} $obj [传入对应的整体对象，最外层对象]
* @param {[string]} selector [传入对应的选择器class]
* @param {[function]} callback [回调函数]
*/
var selfUploadFile = function ($obj, selector, callback) {
var json = {
maxFileSize: 3000000, // 3 MB
maxFileCount: 3,
messages: {
acceptFileTypes: '图片格式不正确',
maxFileSize: '上传图片大小不超过3M',
maxFileCount: '上传图片个数不能超过三个',
}
}
$obj.find(selector).fileupload({
pasteZone: null,
url: "/common/upload/image", //文件上传地址，可以直接写在input的data-url属性内
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 3000000, // 3 MB
change: function(e, data) {
var bool = false;
/* 上传文件个数控制 */
if(data.files.length + $obj.find('.cover-img').find('img').length > json.maxFileCount) {
alert(json.messages.maxFileCount);
return false;
}
/* 上传文件大小控制 */
$.each(data.files, function (i, _) {
if(_.size > json.maxFileSize) {
bool = true;
return false;
}
});
if(bool) {
alert(json.messages.maxFileSize);
return false;
}
},
drop: function(e, data) {
},
done: function(e, result) {
callback(e, result);
if (result.result) {
var data = result.result;
if (data && data.status == 500) {
alert(data.msg);
return;
}
}
}
});
}
调用方法
_common.selfUploadFile($('.box'), '.upload', function (e, resault) {
var urlStr = resault.result.data.uri;
});
4.原生上传，动态绑定节点，form表单提交
/**
* 原生上传，动态绑定节点，form表单提交
* @param {[object]} $obj [传入对应的整体对象，最外层对象, 这个定义好后一定不能产生变动]
* @param {[string]} selector [传入对应的选择器class， input type=file 那个节点]
* @param {[function]} beforeSend [回调函数, 上传之前执行，提前校验，成功返回true,不成功返回false]
* @param {[function]} callback [回调函数]
*/
uploadFile: function ($obj, selector, beforeSend, callback) {
$obj.off('change.upFile').on('change.upFile', selector, function (e) {
$obj.find(selector).eq(0)
var fileList = e.originalEvent.target.files;
/* 上传之前进行校验 */
if(!beforeSend(e.originalEvent.target.files)) {return false};
$.each(fileList, function (i, f) {
if (/^image/.test(f.type)) {
var xhr = new XMLHttpRequest();
xhr.open("post", '/common/upload/image', true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}
//模拟数据
var fd = new FormData();
fd.append('file', f);
xhr.send(fd);
xhr.addEventListener('load', function (e) {
var r = JSON.parse(e.target.response);
if(r.errorCode == '200') {
callback('success', r);
/* 上传完成后清空input 不然同一个文件无法连续上传*/
$obj.find(selector).val('')
}
});
});
});
}
5.后端提供签证 前端上传文件到腾讯云cos （ps：需引入cos-js-sdk-v5.min.js或cos-js-sdk-v5.js）官方文档 https://cloud.tencent.com/document/product/436/11459
var Bucket = '';
var Region = 'ap-';
// 初始化实例
var cos = new COS({
getAuthorization: function (options, callback) {
var url = 'http://10.1.24.7:4005/getSign';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
try {
var data = JSON.parse(e.target.responseText).data;
} catch (e) {
}
callback({
// 后端返回 key 和secretid
TmpSecretId: data && data.tmpSecretId,
TmpSecretKey: data && data.tmpSecretKey,
XCosSecurityToken: data && data.sessionToken,
ExpiredTime: data.expiredTime,
});
};
xhr.send();
}
});
// 事件委托 点击上传图片
$("body").on('change', ".img-upload", (e)=>{
// console.log(e.target);
var file = e.target.files[0];
if (!file) return;
// $(".upload-box").append('
')
// 分片上传文件
cos.sliceUploadFile({
Bucket: Bucket,
Region: Region,
Key: file.name,
Body: file,
onHashProgress: function (progressData) {
// console.log('校验中', JSON.stringify(progressData));
},
onProgress: function (progressData) {
// 上传进度
// console.log('上传中', JSON.stringify(progressData));
},
}, function (err, data) {
if (data.statusCode == 200) {
// 上传成功执行的回调（通常用来回显 可结合第一种方法控制回显图片大小）
$(".upload-box").append('')
$(".upload-img-box .upload-box").find(".img-box").length == 4 ? $(".upload-box").find(".file").remove() : "";
}
// console.log(err, data);
});
});
// 点击上传word 文档
$("body").on('change', ".word-upload", (e)=>{
console.log(e.target);
var file = e.target.files[0];
if (!file) return;
// $(".upload-box").append('')
// 分片上传文件
cos.sliceUploadFile({
Bucket: Bucket,
Region: Region,
Key: file.name,
Body: file,
onHashProgress: function (progressData) {
// console.log('校验中', JSON.stringify(progressData));
},
onProgress: function (progressData) {
// console.log('上传中', JSON.stringify(progressData));
},
}, function (err, data) {
if (data.statusCode == 200) {
$(".upload-word-box").find(".word-name").text(document.getElementById("word-upload").files[0].name)
$(".upload-word-box").find(".word-name").data("url", data.Location)
}
// console.log(err, data);
});
});
ps:
借鉴了前辈的代码 感谢前辈们的无私分享 心存感恩 勿忘初心！