176 lines
7.2 KiB
JavaScript
176 lines
7.2 KiB
JavaScript
|
|
// 图片上传
|
|
$(function() {
|
|
|
|
// 多图
|
|
Imgupload(".upload_file",".upload_btn_item","more",1);
|
|
|
|
|
|
});
|
|
function Imgupload(btn,uploadBox,Type,maxCount){
|
|
// 允许上传的图片类型
|
|
var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
|
|
// 1024KB，也就是 1MB
|
|
var maxSize = 1024 * (1024*4); //小于4MB
|
|
// 图片最大宽度
|
|
var maxWidth = 10000;
|
|
// 最大上传图片数量
|
|
var maxCount = maxCount||1;
|
|
var imgArray=[];
|
|
$(btn).on('change', function(event) {
|
|
var files = event.target.files;
|
|
$(uploadBox).addClass("login-img")
|
|
// 如果没有选中文件，直接返回
|
|
if (files.length === 0) {
|
|
$(uploadBox).removeClass("login-img")
|
|
return;
|
|
}
|
|
if (files.length>maxCount) {
|
|
$(uploadBox).removeClass("login-img")
|
|
alert_box('最多只能上传' + maxCount + '张图片');
|
|
return;
|
|
};
|
|
for (var i = 0, len = files.length; i < len; i++) {
|
|
var file = files[i];
|
|
|
|
var reader = new FileReader();
|
|
// 如果类型不在允许的类型范围内
|
|
if (allowTypes.indexOf(file.type) === -1) {
|
|
$(uploadBox).removeClass("login-img")
|
|
alert_box("该类型不允许上传");
|
|
continue;
|
|
}
|
|
if (file.size > maxSize) {
|
|
$(uploadBox).removeClass("login-img")
|
|
alert_box("图片太大，不允许上传");
|
|
continue;
|
|
}
|
|
|
|
if ($('.item_file').length >= maxCount) {
|
|
$(uploadBox).removeClass("login-img")
|
|
alert_box('最多只能上传' + maxCount + '张图片');
|
|
return;
|
|
}
|
|
reader.onload = function(e) {
|
|
var img = new Image();
|
|
img.onload = function() {
|
|
$(uploadBox).removeClass("login-img")
|
|
// 不要超出最大宽度
|
|
var w = Math.min(maxWidth, img.width);
|
|
// 高度按比例计算
|
|
var h = img.height * (w / img.width);
|
|
var canvas = document.createElement('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
// 设置 canvas 的宽度和高度
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
ctx.drawImage(img, 0, 0, w, h);
|
|
// var base64 = canvas.toDataURL('image/png');
|
|
|
|
var base64 =canvas.toDataURL('image/jpeg',0.8);
|
|
|
|
// 插入到预览区
|
|
var progress = 0;
|
|
// 多图
|
|
//侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
|
|
function OnProgRess(event) {
|
|
var event = event || window.event;
|
|
// console.log("已经上传："+ event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)
|
|
|
|
var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比
|
|
// console.log(loaded+"%");
|
|
if (Type=="more") {
|
|
$preview.find('.uploader_num').text(loaded + '%');
|
|
}else{
|
|
$(uploadBox).find('.uploader_num').text(loaded + '%');
|
|
}
|
|
};
|
|
if (Type=="more") {
|
|
var $preview = $('<li class="item_file uploader_bg" ><div class="uploader_num">0%</div></li>');
|
|
$('.img-box').append($preview);
|
|
var num = $('.item_file').length;
|
|
$('.num_counter').text(num + '/' + maxCount);
|
|
function depositupload(){
|
|
var data = {};
|
|
data.base64 = base64;
|
|
xhr = $.ajaxSettings.xhr();
|
|
$.ajax({
|
|
type: 'post',
|
|
url:'/recharge/deposit',
|
|
dataType: 'json',
|
|
async: true,
|
|
data: data,
|
|
xhr: function() {
|
|
if(OnProgRess && xhr.upload) {
|
|
xhr.upload.addEventListener("progress", OnProgRess, false);
|
|
return xhr;
|
|
}
|
|
},
|
|
success: function(data) {
|
|
var Url='url(' +data.msg+ ')';
|
|
$(".save .upload .img-box").find(".error").remove();
|
|
$preview.css("background-image",Url);
|
|
$('#img_url').val(data.msg);
|
|
$preview.append('<i class="iconfont remove_btn">X</i><span class="preview-open"></span>');
|
|
$preview.removeClass('uploader_bg').find('.uploader_num').remove();
|
|
|
|
},
|
|
error: function(msg) {
|
|
alert_box("上传失败")
|
|
$preview.removeClass('uploader_bg').find('.uploader_num').remove();
|
|
$preview.html('<div class="error"></div>');
|
|
$(".save .upload .img-box").on("click",".error",function(){
|
|
return depositupload();
|
|
})
|
|
|
|
}
|
|
});
|
|
}
|
|
depositupload();
|
|
|
|
}
|
|
if (imgArray.length == maxCount) {
|
|
$(".upload_btn_item").css("display","none");
|
|
}
|
|
};
|
|
|
|
|
|
|
|
img.src = e.target.result;
|
|
imgArray.push(img.src);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
});
|
|
// 删除图片
|
|
if (Type=="more") {
|
|
$(".save .upload .img-box").on("click",".remove_btn",function(){
|
|
var b= $(this).parents(".item_file").index()
|
|
imgArray.splice(b,1);
|
|
var num = $('.item_file').length-1;
|
|
$('.num_counter').text(num + '/' + maxCount);
|
|
if (imgArray.length < maxCount) {
|
|
$(".upload_btn_item").css("display","block");
|
|
}
|
|
$(this).parents(".item_file").remove();
|
|
|
|
// console.log(imgArray)
|
|
|
|
})
|
|
// 预览
|
|
$(".save .upload .img-box").on("click",".preview-open",function(){
|
|
var c= $(this).parents(".item_file").index();
|
|
// console.log(imgArray[c])
|
|
$("#preview-img").attr("src",imgArray[c])
|
|
$(".preview").css("display","block");
|
|
})
|
|
$(".close_btn").click(function(){
|
|
$(".preview").css("display","none");
|
|
$("#preview-img").attr("src","");
|
|
})
|
|
}
|
|
}
|
|
|
|
|