zoukankan      html  css  js  c++  java
  • chrome用type=file获取图片路径并转base64字符串

    1 html页面

    <div class="col-sm-2" style="height: 200px;margin-top: 14px;">
    <input id="photo" name=" " type="file" value="选择图片"  ng-model="photoUrl">
    <input type="button" ng-click = "uploadPic()" value="确定" style="margin-top: 150px;margin-left: 10px;"/>
    </div>

    2 js里面

    $scope.uploadPic = function(){
    var obj = document.getElementById("photo");
    console.log("13:"+obj.value)
    if(obj.value){
    var file = obj.files[0]

    //注意此处,chrome不支持直接获取文件的绝对路径,需要把文件放到一个中间地址,然后用js获取这个中间地址的绝对路径
    var windowURL = window.URL || window.webkitURL;  
       var dataURL = windowURL.createObjectURL(file); 
    console.log($('#img1'))
    console.log(dataURL)
     $('#img1').attr('src',dataURL)
    var img = document.createElement('img');
    img.src = dataURL;

    以上是在中间地址放文件的逻辑
    var data
    img.onload =function() {

    //转base64
    data = getBase64Image(img);
    console.log("changdu:"+data.length);

    一般浏览器对提交字符串有大小限制,要限定一下,要不会报错
    if(data.length<1050000){
    console.log(data);
    $('#img1').attr('src',data)
    $scope.pic = {};
    $scope.pic.idPark = idPark;
    $scope.pic.picture = data;
    dataParkSettingAdmin.saveOrUpdateParkPicture(idPark,$scope.pic).success(function(data) {
    console.log("shangchuantupian:"+data.result);
    })
    }else{

    app.modalWin.info({title:' ', content:'该图片不支持上传' });
    }
    }
    }
    }

    以下是图片转base64字符串的函数
    function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL // return dataURL.replace("data:image/png;base64,", "");
    }

  • 相关阅读:
    博客图片上传picgo工具安装配置github图传使用
    安装配置hexo icarus主题配置
    通往远方的道路总是漫长的
    java 关于值引用、地址引用的问题
    Java设计模式の迭代器模式
    Java设计模式の模版方法模式
    vim 常用快捷键(整理版)
    Java设计模式の责任链模式
    Java设计模式の代理模式
    java rmi远程方法调用实例
  • 原文地址:https://www.cnblogs.com/zhaoblog/p/6534299.html
Copyright © 2011-2022 走看看