shangshang
/
hhqtest


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script><script src="../lrz.min.js"></script>
      <script>
  $(function(){

	  
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="page-hd">
        <h1 class="page-hd-title">
            图片压缩上传
        </h1>
        <p class="page-hd-desc">需要加载lrz.min.js,这个插件可以压缩大图片为设定宽度图片,上传速度极快,原理是先压缩图片,然后转换成base64上传,目前比较好用的;如果是微信内,对于少量图片,建议采用jssdk</p>
    </div>
    
  <div class="weui_cells weui_cells_form">
   
                  <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">单图片压缩上传</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id='img'>
                             
                            </ul>
                            <div class="weui_uploader_input_wrp">
                                <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="headimgurl" />
                                <input  type="hidden"  id="headimgurl1" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
           <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">多图先压缩后上传</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id='img2'>
                            
                            
                            </ul>
                            <div class="weui_uploader_input_wrp" id="file2">
                                <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"  id='headimgurl2' multiple />
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   
  </div>
  
  
                   <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">单图片不压缩上传</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id='img1'>
                            
                            
                            </ul>
                            <div class="weui_uploader_input_wrp">
                                <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="i1" onchange="previewImage(this)"/>
                                <input  type="hidden"  id="i4" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
    <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">多图不压缩上传</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files" id='img2x'>
                            
                            
                            </ul>
                            <div class="weui_uploader_input_wrp">
                                <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"  onchange="previewImage1(this)" multiple />
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   
   
           <script>
             
  
function previewImage(file) {
    var MAXWIDTH = 100;
    var MAXHEIGHT = 200;
    if (file.files && file.files[0]) {
        var reader = new FileReader();
        reader.onload = function (evt) {         
            $('#img1').html('<li class="weui_uploader_file" style="background-image:url('+evt.target.result+')"></li>');          
        };
        reader.readAsDataURL(file.files[0]);//
        console.log(file.files[0]);
    }
}
function previewImage1(file) {
    var MAXWIDTH = 100;
    var MAXHEIGHT = 200;
    for(var i=0;i<file.files.length;i++){
    
    if (file.files && file.files[i]) {
        var reader = new FileReader();
        reader.onload = function (evt) {   
            $('#img2x').append('<li class="weui_uploader_file" style="background-image:url('+evt.target.result+')"></li>');          
        };
        reader.readAsDataURL(file.files[i]);
    }
    
    }
    
}
       
$(function(){


 var f = document.querySelector('#headimgurl');
f.onchange = function () {
    lrz(this.files[0],{width:640,fieldName:"file"}).then(function (rst) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '1.php');

            xhr.onload = function () {
                if (xhr.status === 200) {
                var obj = eval('(' + xhr.responseText + ')');
                  $('#img').html('<li onclick="var delimg=$(this);$.confirm(\'您确定要删除吗?\', \'确认删除?\', function() {delimg.remove();},function(){$.toast(\'取消操作\', \'cancel\');});" class="weui_uploader_file weui_uploader_status" style="background-image:url('+obj.src+')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>');
                $("#headimgurl1").val(obj.src);
                } else {
                    // 处理其他情况
                }
            };

            xhr.onerror = function () {
                // 处理错误
            };

            xhr.upload.onprogress = function (e) {
                // 上传进度
                var percentComplete = ((e.loaded / e.total) || 0) * 100;
 }

            // 添加参数
            rst.formData.append('size', rst.fileLen);
            rst.formData.append('base64', rst.base64);
            // 触发上传
            xhr.send(rst.formData);

            return rst;
        })

        .catch(function (err) {
alert(err);
        })

        .always(function () {// 不管是成功失败，这里都会执行
        });
}


//多图上传
var f2 = document.querySelector('#headimgurl2');
f2.onchange = function (e) {

var files = e.target.files;
var len = files.length;
for (var i=0; i < len; i++) {
    lrz(files[i],{width:640,fieldName:"file1"}).then(function (rst) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '2.php');

            xhr.onload = function () {
                if (xhr.status === 200) {
                var obj = eval('(' + xhr.responseText + ')');
                   $('#img2').append('<li onclick="var delimg=$(this);$.confirm(\'您确定要删除吗?\', \'确认删除?\', function() {delimg.remove();},function(){$.toast(\'取消操作\', \'cancel\');});" class="weui_uploader_file weui_uploader_status" style="background-image:url('+obj.src+')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>'); 
                $('#file2').append('<input value="'+obj.src+'"  type="hidden"  name="files" />');
                } else {
                    // 处理其他情况
                }
            };

            xhr.onerror = function () {
                // 处理错误
            };

            xhr.upload.onprogress = function (e) {
                // 上传进度
                var percentComplete = ((e.loaded / e.total) || 0) * 100;
            };

            // 添加参数
            rst.formData.append('size', rst.fileLen);
            rst.formData.append('base64', rst.base64);
            // 触发上传
            xhr.send(rst.formData);

            return rst;
        })

        .catch(function (err) {
alert(err);
        })

        .always(function () {// 不管是成功失败，这里都会执行
        });

}//for end
}


})


 </script>    
</body>
</html>