您的位置：首页 > Web前端 > HTML5

H5 压缩图片上传(pc端适用)支持png/jpg格式（其他格式都会转为png）

2016-05-25 13:09 931 查看 
html代码：
<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/upload/jquery.fileupload.js"></script>
<script src="js/upload/preview.js"></script>
</head>
<body style="background:#000; color:#FFF">
<div>
<input hidden="hidden" id="fileId" type="file" name="imgFile" accept="image/*" />
<div id="progress" class="overlay"/></div>
</div>
<div id="picId" title="点击选择图片" onclick="$('#fileId').click();">
<img src="addimg.jpg">
</div>
<button type="button" onclick="uploadImage()">确定</button>
</body>
</html>



js:（设置宽高就压缩指定大小，不设置就原大小）

<script type="text/javascript">
//图片压缩
$('#fileId').fileupload({
dropZone:null,
pasteZone:null,
add: function (e, data) {
if($.support.localPreview){
var file = data.files[0];
$(this).previewImg({
uploadFile: file,
uploadData: data,
divName:'picId',
fileName:'picId',
width: 118,
height: 40,
quality: 90,
});
}else{
if (e.isDefaultPrevented()) {
return false;
}
}
},
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

function uploadImage() {
alert($("#bigPreviewImgpicId").attr("src"));
var img = $("#bigPreviewImgpicId").attr("src");
$.ajax({
type : "POST",
url : "footerConfig.action?action=saveImg",
data : {
base64Data : img
},
cache : false,
success : function(data) {
alert("上传成功");
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败，请检查网络后重试");
}
});
}
</script>


preview.js(此处是将别人发给我参考代码的稍加修改，做成了兼容png格式图片，原地址不详。)

;(function ($) {
"use strict";
$.support.localPreview = !!(window.FileReader && window.Image && document.createElement('canvas').getContext);
var defaults = {
uploadFile: null,
uploadData: null,
width: null,
height: null,
resizable: false,
selectable: false,
avatarParams: {},
padding:0,
afterOpen: function(modal) {
//do your stuff
},
afterClose: function(modal) {
//do your suff
}
};
var config = {};
var jcrop = null;
var $this = new Object();
var methods = {
init : function(options) {

//alert(options.divName);
var DivName=options.divName;
var fileName=options.fileName;
return this.each(function() {
$this.uploader = $(this);
$this =  $.extend({}, $this, methods);
config = $.extend({}, defaults, options);

var reader = new FileReader();
var file = config.uploadFile;
if(file == null){
$.error( 'uploadFile is not setted!' );
}
reader.onload = function(e) {
$this.compress(e.target.result, options.quality, file.type,options.width,options.height, function(compressedSrc){
var $img = $('<img>').attr("src", compressedSrc);
$img.attr('id', 'bigPreviewImg'+fileName+'');
$('#bigPreviewImg'+fileName).css({
width:'300px',
});

$('#'+DivName).empty().append($img);
});
},
reader.readAsDataURL(file);
});
},

compress: function(src, quality, mime_type,width,height, callback){
var image = new Image();
image.src = src;

image.onload = function () { // binding onload event
var imgWidth = image.naturalWidth;
var imgHeight = image.naturalHeight;
var canvas = document.createElement('canvas');
/* if(imgHeight > 400) {
imgWidth *= 400 / imgHeight;
imgHeight = 400;
} */
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = (undefined==width)?imgWidth:width;
canvas.height = (undefined==height)?imgHeight:height;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
mime_type = (undefined==mime_type) ? "image/jpeg" : mime_type;
quality = (undefined==quality)?"100" : quality;
var newImageData = canvas.toDataURL(mime_type, quality/100);

if(undefined !== callback){
callback(newImageData);
}
};
},

};

$.fn.previewImg = function(method) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' +  method + ' does not exist' );
}
};
})(jQuery);


样式：

上传前：



压缩后：（注：此时只是压缩后图片的现实，并没有上传到服务器。我是将得到的base64传到后台，在后台解析上传。后台操作此处没有记录）



代码下载地址：http://download.csdn.net/detail/limyrain/9530715
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5
                                                压缩图片
                                                js
                                                jquery.fileupload
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航