酒店网站源码,wordpress 字体替换极客族,wordpress 时光捕手,织梦网站是不是容易做seoH5jqweui实现手机端图片压缩上传主要功能#xff0c;使用H5的formData上传base64格式的图片#xff0c;canvas压缩图片#xff0c;前端样式使用weui#xff0c;为方便起见#xff0c;使用了jquery封装过的weui#xff0c;jqweui。话不多少#xff0c;开始上代码。前端代…H5jqweui实现手机端图片压缩上传主要功能使用H5的formData上传base64格式的图片canvas压缩图片前端样式使用weui为方便起见使用了jquery封装过的weuijqweui。话不多少开始上代码。前端代码直接在jqweui官网下的demo里改的是dist下的demo!DOCTYPE html
htmlheadtitlejQuery WeUI/titlemeta charsetutf-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1, user-scalablenometa namedescription contentWrite an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
link relstylesheet href../lib/weui.min.css
link relstylesheet href../css/jquery-weui.css
link relstylesheet hrefcss/demos.css/headbody ontouchstartheader classdemos-headerh1 classdemos-titleUploader/h1/headerdiv classweui-cells weui-cells_formdiv classweui-celldiv classweui-cell__bddiv classweui-uploaderdiv classweui-uploader__hdp classweui-uploader__title图片上传/pdiv classweui-uploader__info0/2/div/divdiv classweui-uploader__bdul classweui-uploader__files iduploaderFilesli classweui-uploader__file stylebackground-image:url(./images/pic_160.png)/li/uldiv classweui-uploader__input-boxinput iduploaderInput classweui-uploader__input typefile acceptimage/* multiple/div/div/div/div/div/divscript src../lib/jquery-2.1.4.js/script
script src../lib/fastclick.js/script
script$(function() {FastClick.attach(document.body);});
/script
script src../js/jquery-weui.js/script
script$(function () { // 允许上传的图片类型 var allowTypes [image/jpg, image/jpeg, image/png, image/gif]; // 1024KB也就是 1MB var maxSize 2048 * 2048; // 图片最大宽度 var maxWidth 10000; // 最大上传图片数量 var maxCount 6; $(#uploaderInput).on(change, function (event) { var files event.target.files; //console.log(files);return false;// 如果没有选中文件直接返回 if (files.length 0) { 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) { $.alert(该类型不允许上传, 警告); continue; } if (file.size maxSize) { //$.weui.alert({text: 图片太大不允许上传});$.alert(图片太大不允许上传, 警告); continue; } if ($(.weui-uploader__file).length maxCount) { $.weui.alert({text: 最多只能上传 maxCount 张图片}); return; } reader.readAsDataURL(file); reader.onload function (e) {//console.log(e);var img new Image(); img.src e.target.result; img.onload function () { // 不要超出最大宽度 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/jpeg,0.8); //console.log(base64);// 插入到预览区 var $preview $(li classweui-uploader__file weui-uploader__file_status stylebackground-image:url( img.src )div classweui-uploader__file-content0%/div/li); $(#uploaderFiles).append($preview); var num $(.weui-uploader__file).length; $(.weui-uploader__info).text(num / maxCount); var formData new FormData();formData.append(images, base64);//console.log(img.src);$.ajax({url: savetofile.php,type: POST,data: formData,contentType:false,processData:false,success: function(data){$preview.removeClass(weui-uploader__file_status);$.toast(上传成功, function() {//console.log(close);});},error: function(xhr, type){alert(Ajax error!)}});}; }; } }); });
/script/body
/html上述代码中 var base64 canvas.toDataURL(image/jpeg,0.8); 只有这个函数的第一个参数为image/jpeg是压缩功能才可正常使用第二个参数为压缩比例php代码对base64格式的图片解码并保存?php$imgData $_REQUEST[images];
if (preg_match(/^(data:\s*image\/(\w);base64,)/, $imgData, $result)){$type $result[2];$rand rand(1000,9999);$new_file img/.$rand...$type;if (file_put_contents($new_file, base64_decode(str_replace($result[1], , $imgData)))){echo $type;}}?
