最近做拍照图片上传，由于现在的手机像素都很高，拍出来的照片都很大，所以需要上传图片之前先压缩上传，后来再github上找到一个插件
参考：https://github.com/cilla123/BenUpload
1.用的时候，请先引入JQuery或者Zepto
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>"><!-- 图片压缩 -->
2.引用插件
<script type="text/javascript" src="../common/compress-tools.js"></script>
<script type="text/javascript" src="../imgUp.js"></script><!-- 多张图片上传 -->
3.使用
html代码
<div class="section_box">
<div class="section_row">
<div class="upload_box">
<input id="file1" type="file" name="file" accept="image/*" class="file_img J_file" data-img="img1" data-path="imgPath1" capture="user">
<div class="file_info">
<p><img alt="" src="images/camera.png" class="camera" /></p>
<p class="upload_txt">行驶证</p>
</div>
<img src="" id="img1" class="up_img" style="display:none;"/>
</div>
<div class="upload_box">
<div class="z_photo upimg-div">
<input id="file2" type="file" name="file" accept="image/*" class="file_img J_file" data-img="img2" data-path="imgPath2" capture="environment">
<div class="file_info">
<p><img alt="" src="images/camera.png" class="camera"/></p>
<p class="upload_txt">驾驶证</p>
</div>
<img src="" id="img2" class="up_img" style="display:none;"/>
</div>
</div>
</div>
</div>
<!-------多图上传部分------>
<div class="section_box">
<div class="section_row">
<div class="z_photo upimg-div">
<section class="z_file fl card_img_wrap">
<img src="images//add_img.png" class="file_add_img add-img">
<input type="file" accept="image/*" name="file" id="fileMore" class="file_img file J_file" capture="environment" />
</section>
</div>
</div>
</div>
js部分
BenUploadUtils({
dom: '.J_file', // 需要挂在的DOM节点
url: url// 上传的服务器的请求地址
limitSize: 10240000, // 1024000kb
limitFormat: 'gif,jpg,jpeg,png,GIF,JPG,PNG', // 使用什么格式
limitSizeCallback: function(err){ // 限制大小的回调事件
console.log(err);
},
limitFormatCallback: function(err){ // 限制格式的回调事件
console.log(err);
},
onUploadBeforeCallback: function(res){ // 上传图片之前的回调事件
console.log(res)
},
onUploadSuccessCallback: function(res,_this){ // 上传成功的回调事件
/**多张图片压缩上传*/
if($(_this).attr("id")=='fileMore'){ //判断是否为多张图片上传
//var myData=$.parseJSON(res.data)
$(".up-img").each(function(){
if($(this).attr("src")==undefined){
$(this).attr("src",res.data);
$(this).attr("data-src",res.data);
}
})
var imgAll="";
$(".up-img").each(function(index){
var imgSrc = $(this).attr("data-src");
if(imgSrc.substr(imgSrc.length-1,1) == ','){
imgSrc = imgSrc.substr(0,imgSrc.length-1)
}
imgAll = imgAll+$(this).attr("src")+",";
})
$("#imgPathAll").val(imgAll);
}else{
var img=$(_this).attr("data-img");
var path=$(_this).attr("data-path");
$("#"+img).show()
$("#"+img).attr("src",res.data);
$("#"+path).val(res.data)
}
},
onUploadFailCallback: function(res){ // 上传失败的回调事件
console.log(res);
},
onUploadAlwaysCallback: function(res){ // 上传无论什么结果的回调事件
console.log(res);
},
onRenderResizerBefore: function(res){ // 压缩之前的回调事件
//$("#preview").attr("src",res);
},
onRenderResizerAfter: function(res){ // 压缩之后的回调事件
//$("#nextview").attr("src",res);
}
}).init();
多图上传的时候imgUp.js
/*多图上传,2019-01-14，wangyingying*/
function uploadImages(size,OSS,num){//num代表最多上传数量
var delParent;
var defaults = {
fileType : ["jpg","png","bmp","jpeg"], // 上传文件的类型
fileSize : 10240000 * size , // 上传文件的大小 10k
};
/*点击图片的文本框*/
$(".z_photo").on("change",".file",function(){
var idFile = $(this).attr("id");
var _this =this;
var file = document.getElementById(idFile);
var url= $(this).attr("data-url");
var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
var input = $(this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > num || totalNum > num ){
alert("上传图片数目不可以超过5个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
}else if(numUp < 5){
fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
$("up-img").each(function(){
imgArr.push($(this).attr("src"));
})
var $section = $("<section class='up-section fl loading'>");
imgContainer.append($section);
var $span = $("<span class='up-span'>");
$span.appendTo($section);
var $img0 = $("<img class='close-upimg'>").on("click",function(event){
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.attr("src",window.location.protocol+"//" + window.location.host +"/assets/wechat/images/img_del.png").prependTo($section);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
uploadImg(idFile,url,OSS);
}
}
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >=num){
$(this).parent().hide();
}
//input内容清空
$(this).val("");
});
$(".z_photo").delegate(".close-upimg","click",function(){
$(".works-mask").show();
delParent = $(this).parent();
});
$(".wsdel-ok").click(function(){
$(".works-mask").hide();
var numUp = delParent.siblings().length;
if(numUp < (num+1)){
delParent.parent().find(".z_file").show();
}
delParent.remove();
var imgAll="";
$(".up-img").each(function(){
imgAll = imgAll+$(this).attr("data-src")+",";
})
$("#imgPathAll").val(imgAll);
});
$(".wsdel-no").click(function(){
$(".works-mask").hide();
});
function validateUp(files){
var arrFiles = [];//替换的文件数组
for(var i = 0, file; file = files[i]; i++){
//获取文件上传的后缀名
var newStr = file.name.split("").reverse().join("");
if(newStr.split(".")[0] != null){
var type = newStr.split(".")[0].split("").reverse().join("");
if(jQuery.inArray(type, defaults.fileType) > -1){
// 类型符合，可以上传
if (file.size >= defaults.fileSize) {
alert('您这个"'+ file.name +'"文件大小过大,超过了'+size+"k");
}else{
// 在这里需要判断当前所有文件中
arrFiles.push(file);
}
}else{
alert('您这个"'+ file.name +'"上传类型不符合');
}
}else{
alert('您这个"'+ file.name +'"没有类型, 无法识别');
}
}
return arrFiles;
}
function uploadImg(idFile,dataUrl){
BenUploadUtils({
dom: '#fileMore', // 需要挂在的DOM
url: WECHAT.getWechatJsonPath() + '/claimsUser/uploadPictureBase64.do', // 上传的服务器地址
limitSize: 10240000, // 1024000kb
limitFormat: 'gif,jpg,jpeg,png,GIF,JPG,PNG', // 使用什么格式
limitSizeCallback: function(err){ // 限制大小的回调事件
console.log(err);
},
limitFormatCallback: function(err){ // 限制格式的回调事件
console.log(err);
},
onUploadBeforeCallback: function(res){ // 上传图片之前的回调事件
console.log(res)
},
onUploadSuccessCallback: function(res,_this){ // 上传成功的回调事件
$(".up-img").each(function(){
if($(this).attr("src")==undefined){
if(OSS=="OSS"){
$(this).attr("src",res.data);
}else{
$(this).attr("src",WECHAT.getImgPath()+res.data);
}
$(this).attr("data-src",res.data);
}
})
var imgAll="";
$(".up-img").each(function(index){
if(imgAll==""){
imgAll = imgAll+$(this).attr("data-src");
}else{
imgAll = imgAll+","+$(this).attr("data-src");
}
imgAll = imgAll+$(this).attr("src")+",";
})
$("#imgPathAll").val(imgAll);
},
onUploadFailCallback: function(res){ // 上传失败的回调事件
console.log(res);
},
onUploadAlwaysCallback: function(res){ // 上传无论什么结果的回调事件
console.log(res);
},
onRenderResizerBefore: function(res){ // 压缩之前的回调事件
//$("#preview").attr("src",res);
},
onRenderResizerAfter: function(res){ // 压缩之后的回调事件
//$("#nextview").attr("src",res);
}
}).init();
/*var params={
"_csrf_token":WECHAT.getToken()
};
var url=WECHAT.getWechatJsonPath() +dataUrl;
$.ajaxFileUpload({
url: url,
type: 'post',
data:params,
cache:false,
async:false,
secureuri: false,
fileElementId:'fileMore',
success:function (data){
var myData=$.parseJSON(data)
console.log(myData.data);
$(".up-img").each(function(){
if($(this).attr("src")==undefined){
if(OSS=="OSS"){
$(this).attr("src",myData.data);
}else{
$(this).attr("src",WECHAT.getImgPath()+myData.data);
}
$(this).attr("data-src",myData.data);
}
})
var imgAll="";
$(".up-img").each(function(index){
if(imgAll==""){
imgAll = imgAll+$(this).attr("data-src");
}else{
imgAll = imgAll+","+$(this).attr("data-src");
}
imgAll = imgAll+$(this).attr("src")+",";
})
$("#imgPathAll").val(imgAll);
}
})*/
}
}
注意：
1.插件里面图片转成base64上传的时候是将整个base64全部上传，项目中，我们是将base截取了前面部分，只用src上传的
var data = data.split(',')[1]
2.多张图片上传的时候需要修改部分插件内容
var limitCallback = function(){
$(settings.dom).on('change', function(event) {
if (isSizeRange(this) && isFormatRange(this)) {
var reader = new FileReader();
var fileTemp = $(this)[0].files[0];
var _this =event.target;
//添加多图部分
var fileId = event.target.id
var num =10//最多能上传几张图片
if(fileId=='fileMore'){
var file = document.getElementById(fileId);
var imgContainer = $(_this).parents(".z_photo"); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
var input = $(_this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > num || totalNum > num ){
alert("上传图片数目不可以超过"+num+"个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
return;
}else if(numUp < num){
//fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
$("up-img").each(function(){
imgArr.push($(_this).attr("src"));
})
var $section = $("<section class='up-section fl loading'>");
imgContainer.append($section);
var $span = $("<span class='up-span'>");
$span.appendTo($section);
var $img0 = $("<img class='close-upimg'>").on("click",function(event){
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.attr("src",window.location.protocol+"//" + window.location.host +"/assets/wechat/images/img_del.png").prependTo($section);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
}
}
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >=num){
$(_this).parent().hide();
}
//input内容清空
//$(_this).val("");
}
reader.onload = function(e) {
var base64Img= e.target.result;
// 压缩前的数据
settings.onRenderResizerBefore ? settings.onRenderResizerBefore(base64Img) : '';
//--执行resize。
BenImageResizer({
resizeMode:"auto",
dataSource:base64Img,
dataSourceType:"base64",
maxWidth:1200, //允许的最大宽度
maxHeight:600, //允许的最大高度。
debug:true,
onTmpImgGenerate:function(img){},
success:function(resizeImgBase64,canvas){
// //压缩后预览
settings.onRenderResizerAfter ? settings.onRenderResizerAfter(resizeImgBase64) : '';
uploadToServer(resizeImgBase64,_this);
}
});
}
reader.readAsDataURL(fileTemp);
}
});
}
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
