zoukankan      html  css  js  c++  java
  • H5上传图片

    最近做产品小A的需求,设计到图片的上传问题,整理一下。

    PC上传图片

    基本结构

    1. form[enctype="multipart/form-data"]
    2. input[type="file"]
    3. 上传完毕后,获取图片url,显示到页面上

    问题

    1. 图片要上传完毕后,才能显示
    2. 压缩上传

    H5 如何解决

    1. FileReader
    2. canvas

    FileReader

    FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。

    var fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = function(e) {
        $('img').attr('src', e.target.result);
    };
    

    FormData

    实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。

    var fd = new FormData();
     fd.append('filename', file);
    $.ajax({
         url: 'xxxx/yyyy',
         data: fd,
         type: 'POST',
         cache: false,
         processData: false,
         contentType: false,
         dataType: 'json',
         success: function(data) {
         },
         error: function() {
         }
    });
    

    canvas

    手机的流量是宝贵的,但是上传个一张照片可能有几M,所有需要对图片进行压缩处理,canvas对图片的操作是通过base64格式处理的。

    var img = new Image();
    img.src = base64;
    img.onload = function(){
        var canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        canvas.getContext("2d").drawImage(img, 0, 0);
        var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
    }
    

    上传base64

    使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程中,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案:

    1. server支持,单独开接口处理base64上传
    2. 前端将base64转化成File对象,复用原来的server接口

    这里重点讨论第2中方案。 JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。 基于此,只需要把base64转化成Blob对象即可。Blob的构造参考 这里 ,可以使用类型数据来处理。

    // 解码base64
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // 类型数组
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: mimeString
    });
  • 相关阅读:
    EntityFramework优缺点
    领导者与管理者的区别
    七个对我最好的职业建议(精简版)
    The best career advice I’ve received
    Difference between Stored Procedure and Function in SQL Server
    2015年上半年一次通过 信息系统项目管理师
    Difference between WCF and Web API and WCF REST and Web Service
    What’s the difference between data mining and data warehousing?
    What is the difference between a Clustered and Non Clustered Index?
    用new创建函数的过程发生了什么
  • 原文地址:https://www.cnblogs.com/crabzzz/p/5230804.html
Copyright © 2011-2022 走看看