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","");
|
||
})
|
||
}
|
||
}
|
||
|
||
|