zoukankan      html  css  js  c++  java
  • base64 json

    javascript将base64编码的图片数据转换为file并提交
    直接提交base64编码图片数据,过大的话后台会出现转发错误问题。
    一个不错的解决方式就是将base64编码的图片数据转换为Blob(与File相似)并添加到form中提交。下面是代码:

    /**

    • @param base64Codes
    •        图片的base64编码
      

    */
    function sumitImageFile(base64Codes){
    var form=document.forms[0];

    var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
    
    //convertBase64UrlToBlob函数是将base64编码转换为Blob
    formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
    
    //ajax 提交form
    $.ajax({
        url : form.action,
        type : "POST",
        data : formData,
        dataType:"text",
        processData : false,         // 告诉jQuery不要去处理发送的数据
        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头
        
        success:function(data){
            window.location.href="${ctx}"+data;
        },
        xhr:function(){            //在jquery函数中直接使用ajax的XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);  
                    console.log("正在提交."+percentComplete.toString() + '%');        //在控制台打印上传进度
                }
            }, false);
            
            return xhr;
        }
        
    });
    

    }

    /**

    • 将以base64的图片url数据转换为Blob
    • @param urlData
    •        用url方式表示的base64图片数据
      

    */
    function convertBase64UrlToBlob(urlData){

    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头,并转换为byte
    
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    
    return new Blob( [ab] , {type : 'image/png'});
    

    }

  • 相关阅读:
    进制
    流程控制
    运算符
    格式化输出
    数据结构-树的遍历
    A1004 Counting Leaves (30分)
    A1106 Lowest Price in Supply Chain (25分)
    A1094 The Largest Generation (25分)
    A1090 Highest Price in Supply Chain (25分)
    A1079 Total Sales of Supply Chain (25分)
  • 原文地址:https://www.cnblogs.com/mayidudu/p/6061243.html
Copyright © 2011-2022 走看看