上传图片 cavans

最新推荐文章于 2020-08-03 14:37:22 发布

LinDaiuuj

最新推荐文章于 2020-08-03 14:37:22 发布

阅读量382

点赞数

转自：https://segmentfault.com/a/1190000002535673(function($){
            $.fn.extend({
                aiiUpload:function(obj)
                {
                    if(typeof obj !="object")
                    {
                        alert('参数错误');
                        return;
                    }
                    var imageWidth,imageHeight;
                    var base64;
                    var file_num=0;
                    var fileInput=$(this);
                    var fileInputId=fileInput.attr('id');
                    createDoc('#'+fileInputId,obj.method,obj.action);
                    $('#aii_file').change(function(){
                        if(test(this.value)==false)
                        {
                            alert('格式错误');
                            return;
                        }
                        var objUrl = getObjectURL(this.files[0]);
                        if (objUrl) 
                        {
                            imgBefore(objUrl,file_num);
                            render(objUrl,obj.max_h,obj.max_w,file_num);
                            file_num++;
                        }
                    });
                }
            });
            function createDoc(objID,form_method,form_action)
            {
                var element=$(objID);
                element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file"  id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
            }
            function test(value)
            {
                var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
                return regexp.test(value);
            }
            function render(src,MaximgW,MaximgH,idnum)
            {
                var image=new Image();
                image.onload=function()
                {
                    var canvas=document.getElementById('canvas');
                    if(image.width>image.height)
                    {
                        imageWidth=MaximgW;
                        imageHeight=MaximgH*(image.height/image.width);
                    }
                    else if(image.width<image.height)
                    {
                        imageHeight=MaximgH;
                        imageWidth=MaximgW*(image.width/image.height);
                    }
                    else
                    {
                        imageWidth=MaximgW;
                        imageHeight=MaximgH;
                    }
                    canvas.width=imageWidth;
                    canvas.height=imageHeight;
                    var con=canvas.getContext('2d');
                    con.clearRect(0,0,canvas.width,canvas.height);
                    con.drawImage(image,0,0,imageWidth,imageHeight);
                    base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
                    add_doc(base64,idnum);
                }
                image.src=src;
            };
            //建立一個可存取到該file的url
            function getObjectURL(file) {
                var url = null ; 
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ; 
            }
            //预览
            function imgBefore(objUrl,idnum) 
            {
                var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" onclick="img_remove(this);"></div></li>'
                $('.viewList').append(li);
                var img=$('#aiiImg_'+idnum);
                //预览图片居中 填满 代码
                console.log('asdfasdfasdf');

                img.load(function(){
                    var imgw=img.width(),
                        imgh=img.height();
                        console.log(imgw);
                        console.log(imgh);
                    if(imgw>imgh)
                    {
                        img.css('height','100%');
                        img.css('width','auto');
                        img.css('marginLeft',-(img.width()-img.height())/2+'px');
                    }
                    else if(imgw<imgh)
                    {
                        img.css('width','100%');
                        img.css('height','auto');
                        img.css('marginTop',-(img.height()-img.width())/2+'px');
                    }
                });
            }

            function add_doc (base,idnum)
            {
                $('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
            }
        })(jQuery);
        function img_remove(element)
        {
            var num=$(element).prev().attr('idnum');
            $(element).parent().remove();
            $('#f_'+num).remove();
            console.log('asdf');
        }

<section class="section">      <div id="box"></div>       <p style="color:red;">*样式修改请参考aiiUpload.css</p></section>

<script type="text/javascript">  
    $('#box').aiiUpload({  
        method:'POST',  
        action:'form.php',  
        max_h:300,  
        max_w:300,  
        subText:'上传图片',  
        fileText:'选择图片'  
    });  
</script>

转自：http://www.cnblogs.com/hutuzhu/p/5254532.html

PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。

用的技术主要是：

ajax

FileReader

FormData

HTML结构：

<div class="camera-area">
      <form enctype="multipart/form-data" method="post">
        <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/>
          <div class="upload-progress"><span></span></div>
        </form>
      <div class="thumb"></div>
  </div>

已经封装好的upload.js，依赖zepto

(function($) {
  $.extend($.fn, {
    fileUpload: function(opts) {
      this.each(function() {
        var $self = $(this);
        var doms = {
          "fileToUpload": $self.find(".fileToUpload"),
          "thumb": $self.find(".thumb"),
          "progress": $self.find(".upload-progress")
        };
        var funs = {
          //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件
          "fileSelected": function() {
            var files = (doms.fileToUpload)[0].files;
            var count = files.length;
            for (var index = 0; index < count; index++) {
              var file = files[index];
              var fileSize = 0;
              if (file.size > 1024 * 1024)
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
              else
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            }
            funs.uploadFile();
          },
          //异步上传文件
          uploadFile: function() {
            var fd = new FormData();//创建表单数据对象
            var files = (doms.fileToUpload)[0].files;
            var count = files.length;
            for (var index = 0; index < count; index++) {
              var file = files[index];
              fd.append(opts.file, file);//将文件添加到表单数据中
              funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt
            }
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度
            xhr.addEventListener("load", funs.uploadComplete, false);
            xhr.addEventListener("error", opts.uploadFailed, false);
            xhr.open("POST", opts.url);
            xhr.send(fd);
          },
          //文件预览
          previewImage: function(file) {
            var gallery = doms.thumb;
            var img = document.createElement("img");
            img.file = file;
            doms.thumb.html(img);
            // 使用FileReader方法显示图片内容
            var reader = new FileReader();
            reader.onload = (function(aImg) {
              return function(e) {
                aImg.src = e.target.result;
              };
            })(img);
            reader.readAsDataURL(file);
          },
          uploadProgress: function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = Math.round(evt.loaded * 100 / evt.total);
              doms.progress.html(percentComplete.toString() + '%');
            }
          },
          "uploadComplete": function(evt) {
            alert(evt.target.responseText)
          }
        };
        doms.fileToUpload.on("change", function() {
          doms.progress.find("span").width("0");
          funs.fileSelected();
        });
      });
    }
  });
})(Zepto);

调用方法：

$(".camera-area").fileUpload({
        "url": "savetofile.php",
        "file": "myFile"
      });

PHP部分：

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    writeLog($_FILES);
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    echo 'successful';
}
function writeLog($log){
    if(is_array($log) || is_object($log)){
        $log = json_encode($log);
    }
    $log = $log."\r\n";

    file_put_contents('log.log', $log,FILE_APPEND);
}
?>

点击这里下载源码

上篇文章中提到移动端上传图片，我们知道现在流量还是挺贵的，手机的像素是越来越高，拍个照动不动就是好几M，伤不起。虽然客户端可以轻轻松松实现图片压缩再上传，但是我们的应用还可能在浏览器里面打开，怎么办呢，图片压缩。受以前PC上的开发思维影响，尼玛js哪有权限去操作文件，哪有资格压缩图片啊，搞不了，你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下，前端能干的事情越来越多了，开发的功能逼格也越来越高了，H5万岁！前端的魅力也在这，过去不可能的并不意味现在、以后不可能，努力吧，骚年！

js怎么压缩图片？？？潜意识里确实一开始是觉得实现不了，后来翻阅资料，研究了下，发现可行！搞起！

先说说H5以前我们怎么上传，一般是借助插件、flash或者干脆一个文件form表单，少操不少心。

自从有了H5，老板再也不担心我的开发了。

上篇文章提到图片上传用到了FileReader，FormData，实际上主要用这两个我们基本能实现图片的预览和上传了。实现图片压缩，我们需要借助canvas，是的，就是canvas！

大致思路是：

1、创建一个图片和一个canvas

var image = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');

2、我们将input中选择的图片地址通过FileReader获取后赋给新建的图片对象，然后将图片对象丢到canvas画布上。

                      var file = obj.files[0];
                        var reader = new FileReader();//读取客户端上的文件
                        reader.onload = function() {
                            var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
                            image.src=url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
                            ...
                        };
                        image.onload = function() {
                            var w = image.naturalWidth,
                                h = image.naturalHeight;
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
                            fileUpload();
                        };
                        reader.readAsDataURL(file);

这里需要注意的是，canvas将图片画到画布上的时候需要确定canvas的尺寸，同时设定好drawImage的参数，具体如下：

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

dx源图像的左上角在目标canvas上 X 轴的位置。

dy源图像的左上角在目标canvas上 Y 轴的位置。

dWidth在目标canvas上绘制图像的宽度。允许对绘制的图像进行缩放。如果不说明，在绘制时图片宽度不会缩放。

dHeight在目标canvas上绘制图像的高度。允许对绘制的图像进行缩放。如果不说明，在绘制时图片高度不会缩放。

sx需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。

sy需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。

sWidth需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束。

sHeight需要绘制到目标上下文中的，源图像的矩形选择框的高度。

为了上传完整的图片，这里dx,dy必须设置为0，dWidth和dHeight必须设置为原始图片的宽度和高度。这就是为什么我们需要等image对象下载完毕后获取其原始尺寸，这很关键！

3、图片上传

function fileUpload() {
     var data = canvas.toDataURL("image/jpeg", quality);
     //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
    data = data.split(',')[1];
    data = window.atob(data);
    var ia = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
          ia[i] = data.charCodeAt(i);
    };
     //canvas.toDataURL 返回的默认格式就是 image/png
    var blob = new Blob([ia], {
     type: "image/jpeg"
    });
    var fd = new FormData();
        fd.append('myFile', blob);
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", opts.success, false);
    xhr.addEventListener("error", opts.error, false);
    xhr.open("POST", opts.url);
    xhr.send(fd);
 }

这里用的关键方法是canvas.toDataURL

canvas.toDataURL(type, encoderOptions);

官方的说明是The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.实际上就是读取canvas画布上图片的数据。其默认是png格式，如果第一个参数type是image/jpeg的话，第二个参数encoderOptions就可以用来设置图片的压缩质量，经过测试，如果是png格式，100%的宽高经过该方法还有可能使图片变大~~~~适得其反，所以我们可以在canvas.drawImage的时候适当设置sWidth和sHeight，比如同比例缩小1.5倍等，图片质量其实并不太影响查看，尤其对尺寸比较大的图片来说。

上面还有比较陌生的方法atob，其作用是做解码，因为图片格式的base64.

var encodedData = window.btoa("Hello, world"); // encode a string
var decodedData = window.atob(encodedData); // decode the string

该方法解码出来可能是一堆乱码，Uint8Array返回的是8进制整型数组。

Blob是存储二进制文件的容器，典型的Blob对象是一个图片或者声音文件，其默认是PNG格式。

 var blob = new Blob([ia], {
     type: "image/jpeg"
    });

最后通过ajax将Blob对象发送到server即可。

整个流程大致如上，但是~~~实现以后测试跑来说：“你不是说图片压缩了吗，为什么图片还是上传那么慢！”，哥拿起手机对妹纸演示了一下，明明很快嘛，于是反道“是你手机不行或者网络不好吧，你下载图片看明明变小了，比之前肯定快，你看我秒传”。呵呵，说归说，还是偷偷检查代码，在浏览器中打时间log，对比没压缩之前的，尼玛！！！居然才快了几百毫秒！！折腾了半天，之前的代码也重构了，玩我呢。

细心的大神看了上面的代码估计能猜出问题在哪，没错，获取本地图片长宽尺寸的时候出了问题。

我去，获取本地4M大小的图片尺寸花了3174ms！！，图片越大时间也越久~

image.onload = function() {
        var w = image.naturalWidth,
          h = image.naturalHeight;
        canvas.width = w / 1.5;
        canvas.height = h / 1.5;
        ctx.drawImage(image, 0, 0, w, h, 0, 0, w / 1.5, h / 1.5);
        Upload.fileUpload(type);
};

浏览器在本地取图片的时候是没法直接像file.size一样获取其长宽的，只能通过FileReader拿到内容后赋值给新建的image对象，新建的image对象下载需要时间！怎么破？不就是获取本地图片的尺寸吗，难道没有别的办法了？

于是想到了之前研究过的快速获取图片长宽的博文，http://www.cnblogs.com/hutuzhu/p/4092907.html ，demo地址：http://jsbin.com/jivugadure/edit?html,js,output，定时去查询图片加载过程中的高度或者宽度，不用等整个图片加载完毕。

测了下，还是不行，因为定时查询这种方法对常规的server返回的图片有作用，这里图片地址是base64，貌似时间还更久了~哭。

小结一下：

1、用HTML5来压缩图片上传是可行的，在移动端我们不用依赖客户端或者插件，目前主流浏览器支持程度已经很高了。

2、压缩图片一方面是想减少用户上传等待的时间，另外也减少用户为此牺牲的流量，从整体时间来看，因为获取图片尺寸导致多一次下载需要耗时，其实压不压缩时间差别并不是特别大。除非大神们找到合适的方法能够直接获取图片的尺寸，麻烦也告知我一声，万分感谢；

3、既然时间成本差不多，但是我们压缩了图片，减少了图片的大小，减少了流量的消耗，存储空间以及下次获取该图片的时间，所以还是值得的。

补充源代码：

(function($) {
    $.extend($.fn, {
        fileUpload: function(opts) {
            this.each(function() {
                var $self = $(this);
                var quality = opts.quality ? opts.quality / 100 : 0.2;
                var dom = {
                    "fileToUpload": $self.find(".fileToUpload"),
                    "thumb": $self.find(".thumb"),
                    "progress": $self.find(".upload-progress")
                };
                var image = new Image(),
                    canvas = document.createElement("canvas"),
                    ctx = canvas.getContext('2d');
                var funs = {
                    setImageUrl: function(url) {
                        image.src = url;
                    },
                    bindEvent: function() {
                        console.log(dom.fileToUpload)
                        dom.fileToUpload.on("change", function() {
                            funs.fileSelect(this);
                        });
                    },
                    fileSelect: function(obj) {
                        var file = obj.files[0];
                        var reader = new FileReader();
                        reader.onload = function() {
                            var url = reader.result;
                            funs.setImageUrl(url);
                            dom.thumb.html(image);
                        };
                        image.onload = function() {
                            var w = image.naturalWidth,
                                h = image.naturalHeight;
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
                            funs.fileUpload();
                        };
                        reader.readAsDataURL(file);
                    },
                    fileUpload: function() {
                        var data = canvas.toDataURL("image/jpeg", quality);
                        //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
                        data = data.split(',')[1];
                        data = window.atob(data);
                        var ia = new Uint8Array(data.length);
                        for (var i = 0; i < data.length; i++) {
                            ia[i] = data.charCodeAt(i);
                        };
                        //canvas.toDataURL 返回的默认格式就是 image/png
                        var blob = new Blob([ia], {
                            type: "image/jpeg"
                        });
                        var fd = new FormData();
                        fd.append('myFile', blob);
                        var xhr = new XMLHttpRequest();
                        xhr.addEventListener("load", opts.success, false);
                        xhr.addEventListener("error", opts.error, false);
                        xhr.open("POST", opts.url);
                        xhr.send(fd);
                    }
                };
                funs.bindEvent();
            });
        }
    });
})(Zepto);

调用方式：

$(".fileUpload").fileUpload({
                "url": "savetofile.php",
                "file": "myFile",
                "success":function(evt){
                    console.log(evt.target.responseText)
                }
});

移动端多方框输入密码

不知道怎么描述标题，先看截图吧，大致的效果就是一个框输入一位密码。

最开始实现的思路是一个小方框就是一个type为password的input，每输入一位自动跳到下一位，删除一位就自动跳到前一位，android上是OK的，很平滑也没有bug，但是ios上会出现键盘频繁调起和关闭，非常影响用户体验。原因估计是每个input会不断的focus和blur，每次focus会调起键盘，blur又会关闭键盘，so....此方案肯定不行了。

PM非要实现这种效果，木有办法~拗不过，一句用户体验不好会让你没话说，谁要咱是前端呢~拗不过就找解决方案吧。

既然多个是频繁focus和blur导致的问题，又必须是密码框，那何不就用一个input框来输入呢，小方框就用别的方式模拟，开干。这是最后的效果：http://jsbin.com/neqesiqogu/edit?html,css,js,output

下面是实现的样式：

.pwd-box{
width:310px;
padding-left: 1px;
position: relative;
border: 1px solid #9f9fa0;
border-radius: 3px;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 45px;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 18px;
opacity: 0;
z-index: 1;
letter-spacing: 35px;
}
.fake-box input{
width: 44px;
height: 48px;
border: none;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 30px;
}
.fake-box input:nth-last-child(1){
border:none;
}

.pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置，否则IOS上会有闪动的光标~
left:-1000px;
top: -100px;
}

var $input = $(".fake-box input");
            $("#pwd-input").on("input", function() {
                var pwd = $(this).val().trim();
                for (var i = 0, len = pwd.length; i < len; i++) {
                    $input.eq("" + i + "").val(pwd[i]);
                }
                $input.each(function() {
                    var index = $(this).index();
                    if (index >= len) {
                        $(this).val("");
                    }
                });
                if (len == 6) {
                    self.sendPackage(pwd);//发送密码
                }
            });

大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。

其实效果实现不难，关键是思路还有解决该死的兼容，完成该效果的时候IOS会有闪动的光标，android没有，然后找一系列方法去隐藏光标，比如focus时候设置text-indent,color设置transparent等等，但都无济于事，后来发现淘宝有个办法是focus时候把密码框丢到一边去，因为外层有overflow hidden，完美解决了问题~