function uploadImg(event) {
var length = 0;
var e=window.event||event;
var that = e.target;
var serial = $(that).attr('data-serial');
var id = $('meta[name=order_id]').attr('content');
var order_status = $('meta[name=order_status]').attr('content');
$(that).attr('value','');
// 获取当前选中的文件
var length = e.target.files.length;
console.log(length);
// 判断文件的数量
if(length > 30){
alert("单次文件上传数量不能大于30张!");
return;
}
// 判断文件的尺寸
for (var i=0 ;i< length; i++) {
var file = e.target.files[i];
if(file.size > 10*1024 * 1024){
alert("文件尺寸不能大于10M");
return;
}
}
//需要上传的图片内容 base64格式
var imgStr = '';
//七牛云平台 配置的域名
// var urlHeader = "http://qiniu.yunyidai.net/";
//获取七牛的token
var qiniuParams = {
url: '/admin/common/qiniu/upload/token',
type: 'get',
data: {},
header: {},
async: false,
callback: function(res){
qiniutoken = res.data;
}
};
ajaxRequest(qiniuParams);
// 追加到from对象
for (var i=0 ;i< length; i++) {
var file = e.target.files[i];
var prifix = file.name.split('.')[1];
//文件后缀
// console.log(file);
//七牛云图片base64格式上传地址
// document.write(uploadUrl);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(ev) {
var uploadUrl = "https://upload.qiniup.com/putb64/-1/key/" + window.btoa("customer_"+ parseInt(Math.random()*9999999) + new Date().getTime()+"_"+parseInt(Math.random()*9999999) + '.' + prifix);
//获取到base64格式的图片
var imgStr = ev.target.result.split(',')[1];
// console.log(imgStr)
$.ajax({
headers: {
'Authorization' : "UpToken " + qiniutoken
},
url: uploadUrl,
type: 'POST',
data: imgStr,
async: false,
success: function (res) {
var file_path = qiniuhost + '/' + res.key;
$.ajax({
headers: {
'X-CSRF-TOKEN': csrf_token
},
url: '/admin/customer/document/upload',
type: 'post',
async: false,
data:{
id: id,
serial: serial,
order_status: order_status,
file_path: file_path,
},
success: function (res){
var html = '';
html += '<div style="margin-left: 5px;" class="customer_detail_file_size serialid_'+serial + '">';
html += '<div><img src="'+ file_path +'" alt=""></div>';
html += '<div><span data-file_path="'+ file_path +'" class="customer_detail_file_del">删除</span></div>';
html += '</div>';
$('.serialid_'+serial).last().after(html);
},
error: function (res) {
parent.layer.msg('网络异常', {time: 1000});
}
});
}
});
}
// reader.abort();
sleep(100);
}
}
FileReader循环上传图片到七牛
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 在开发过程中,我们常会遇到图片视频上传的场景 大多数情况下我们都选择七牛来减轻我们服务器压力至于为什么 我是这样理...
- ThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网...
- 公司让我写一个 上传图片到七牛的功能,然而.我把七牛提供的Anroid SDK翻烂,一直卡在怎么获取上传凭证,后面...
- 本文首发于个人博客https://www.kagurakana.xyz/detail/e169338c7,如果对您...