前台上传图片压缩,并上传压缩后的图片

原创 2018年04月17日 14:56:04
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">{$vo['sdt_name']}:</label></div>
<div class="weui_cell_bd weui-uploader__input-box">
 <input type="file" class="weui-uploader__input" onChange="showPic(this)" accept="image/*" attr="{$vo['sdt_id']}"  name="head_pic[]" />
</div>

</div>

<div class="weui-btn-area" style="margin: 5px;width: 98%;">
   <a class="weui-btn weui-btn_primary" href="javascript:" id="submitPic">提交</a>
   <a class="weui-btn weui-btn_primary" href="javascript:" id="load" style="display:none;">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在提交  </span>
  </a>
</div>  

<script>

var formData = new FormData(); 
var img_num=0;

function showPic(btn){

         var image_url = URL.createObjectURL($(btn)[0].files[0]);
var std_id=$(btn).attr('attr');
$(btn).parent().before('<div><img id="show_img'+std_id+'"style="width: 77px;height: 77px;" src="'+image_url+'"/><input name="convert_img[]" type="hidden"  attr="'+std_id+'"></div>');
$(btn).parent().hide();
 
photoCompress($(btn)[0].files[0], {
             quality: 0.2
         }, function(base64Codes){
       
             var bl = convertBase64UrlToBlob(base64Codes);
             formData.append("img"+img_num, bl, "file_"+Date.parse(new Date())+".jpg"); 
             img_num++;
     })

}

function photoCompress(file,w,objDiv){
            var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.onload=function(){
                var re=this.result;
                canvasDataURL(re,w,objDiv)
            }
        }
        function canvasDataURL(path, obj, callback){
            var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.7;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                    quality = obj.quality;
                }
                // quality值越小,所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        }
        /**
         * 将以base64的图片url数据转换为Blob
         * @param urlData
         *            用url方式表示的base64图片数据
         */
        function convertBase64UrlToBlob(urlData){
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }

$("#submitPic").click(function(){

$("#load").show();
$("#submitPic").hide();

var cust_id={$cust_id};

var obj=$("input[name='convert_img[]']");

var sdt_id=new Array();
obj.each(function(){

var tmp_id=$(this).attr('attr'); 
sdt_id.push(tmp_id);
}) 


console.log(sdt_id);
if(sdt_id.length==0){
$.toptip('请选择上传的图片');
return;

}

    var xmlHttp = new XMLHttpRequest();
     xmlHttp.open("POST", '{:U("Customer/pic")}'); //注意跨域问题
     xmlHttp.send(formData);
     xmlHttp.onload = uploadComplete; //请求完成
     xmlHttp.onerror =  uploadFailed; //请求失败

})

function uploadComplete(evt) {}

function uploadFailed(evt) {
            alert("上传失败!");
        }

</script>


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lengxin337/article/details/79969777

Jquery+HTML5+PHP实现前台压缩图片并上传

先上图吧: 待上传 上传后 功能描述: 使用HTML5在前台进行图片压缩,然后上传至服务器上由PHP保存。此插件只适用于PC端,未做手机端页面优化,如果需要应用在手机端请自行优化UI,即然...
  • hotlinhao
  • hotlinhao
  • 2017-10-25 11:43:49
  • 670

Java图片上传压缩处理

我们在项目中经常会出现图片的上传、压缩处理的情况,例如等比例压缩、按照一定的宽度和高度压缩等,公共代码如下: import java.awt.Image; import java.awt.imag...
  • softwave
  • softwave
  • 2013-12-14 13:39:20
  • 17254

SpringMVC上传图片并压缩及剪切demo

/** * */ package com.up.controller; import java.awt.Image; import java.awt.image.BufferedImage; ...
  • huahuagongzi9999
  • huahuagongzi9999
  • 2014-11-03 10:52:40
  • 3930

使用JS压缩用户上传图片

对于图片使用JS进行压缩上传
  • XZ2585458279
  • XZ2585458279
  • 2017-05-28 18:59:30
  • 1468

js图片压缩上传

  • 2015年05月07日 14:37
  • 24KB
  • 下载

asp.net C#上传并且压缩图

  • 2015年04月10日 13:40
  • 4KB
  • 下载

前端获取图片压缩后上传给后台

在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上...
  • lowers_sunshine
  • lowers_sunshine
  • 2017-06-05 11:15:33
  • 2888

php上传图片后 实现压缩图片功能

所用的版本是php7 框架是yii2 程序代码仅供参考,如有错误,大家一起改正     public function actionUpload()     {         $path = '/u...
  • lijunling2008live
  • lijunling2008live
  • 2016-08-08 11:22:04
  • 3103

HTML5实现图片压缩上传功能

上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起。虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢...
  • hj7jay
  • hj7jay
  • 2016-03-29 10:54:29
  • 9949
收藏助手
不良信息举报
您举报文章:前台上传图片压缩,并上传压缩后的图片
举报原因:
原因补充:

(最多只允许输入30个字)