`
fudk_k
  • 浏览: 14665 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jst将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'});
}
分享到:
评论

相关推荐

    JST PH2.0规格书

    JST PH2.0规格书强调了该产品在电子行业中的应用广泛性,并为设计工程师提供了详细的物理和电气参数,帮助他们选择最适合其特定应用的连接器产品。规格书的深入理解有助于在设计印刷电路板时做出明智的决策,实现...

    JST_XH连接器规格书

    JST_XH系列连接器是一种电路板用连接器,其命名来源于日本压着端子株式会社(JST)旗下的XH系列。这类连接器主要用于电子设备内部的板与板之间的信号传输,例如电脑主板、家用电器电路板等。规格书提供了一系列参数...

    带缩略图的纯JSt图片浏览器

    1.带缩略图,鼠标悬停于缩略图时,缩略图将变亮,离开时将变暗;当前显示的缩略图比其他缩略图亮。 2.点击缩略图,将显示大图,同时缩略图所在的容器的滚动条将随之而动。 3.鼠标悬停于大图时将显示向左或向右箭头,...

    JST_Connector.rar

    总的来说,alitum jst的3D封装系列为电子设计师提供了丰富的选择,无论是在紧凑型设备还是在需要大量接点的系统中,都能找到合适的解决方案。通过使用这些3D模型,设计师可以在设计早期阶段就能进行精确的预览和验证...

    jst1.0连接器

    - 名称“深圳市伊斯特连接器有限公司”可能是正确的公司名称,OCR技术可能将“伊斯特”误识别为“张扬”。 - “张扬”可能是指某个具体的人名,但在这里更可能是文档中的扫描错误,应为“深圳市伊斯特连接器有限公司...

    Euler_JST_Runge-kutta-Tri_Euler_Runge-Kutta_tri_jst_

    JST格式是一种线性的差分格式,属于高分辨率的有限差分方法,旨在减少数值扩散并保持稳定性。它通过考虑相邻网格点的相对速度来改善对流项的近似,从而提高计算精度,尤其是在处理激波和尖端等强非线性特征时。 ...

    Euler_JST_Runge-Kutta_Dual-time_Euler_Dual-time_Runge-Kutta_jst_

    标题“Euler_JST_Runge-Kutta_Dual-time_Euler_Dual-time_Runge-Kutta_jst_”提到了几个关键概念,包括欧拉方程、JST格式、Runge-Kutta方法以及双时间步技术,这些都是计算流体力学(CFD)中的核心算法。 首先,二...

    JST eFLZ连接器

    JST eFLZ连接器是一款专为紧凑空间设计的高精度FPC(柔性印刷电路)连接器。这款连接器以其极小的尺寸(0.5毫米间距)、低高度(仅2.0毫米高于PCB表面)以及卓越的技术性能在业内闻名。 ### 技术规格 #### 基本...

    JST-XH2.54插座PCB封装库(AD库,封装带3D视图)

    使用者只需将库文件导入到项目中,然后就可以方便地在原理图中选择合适的JST XH2.54插座符号,并在PCB布局时自动应用对应的封装。 总的来说,"JST-XH2.54插座PCB封装库(AD库,封装带3D视图)"是电子设计工程师不可...

    JST.rar_floww4r_jst

    【JST.rar_floww4r_jst】是一个与神经网络相关的压缩包文件,"Jaringan Syaraf Tiruan"是马来语,意为“人工神经网络”(Artificial Neural Networks,简称ANN)。这个文件可能包含有关神经网络的详细资料,如理论、...

    task-jst:将模板编译为 JST 文件

    将模板编译为 JST 文件。 “jst”任务 使用示例 var jst = new ( require ( 'task-jst' ) ) jst . run ( inputs , options , logger ) 选项 选项.设置 类型: object 默认情况下,使用 ERB 样式的模板分隔符,...

    JavaScript Template JST模板引擎

    Trimpath JavaScript 是不个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。...下面将通过翻译该站的文章来给大家介绍这个JST引擎的使 用。

    jst了实际应用

    1. **属性值包含表达式** - 如`${expression}"&gt;`,EL表达式会被计算并转换为适当类型。 2. **属性值包含文本和表达式** - 文本和表达式可以混合,EL会从左到右计算表达式。 3. **纯文本属性值** - 直接的字符串会被...

    jst diedai l jar

    要使用JSTL,你需要将相关的JAR文件(如`jstl.jar`和`standard.jar`)添加到Web应用的`WEB-INF/lib`目录下,这样Web容器才能识别并加载这些库。 **JSTL的其他标签** 除了迭代标签,JSTL还包含许多其他有用的标签,...

    JST2000(II)使用说明书(分机号码2位数)JPG

    总的来说,JST2000(II)电话系统以其全面的功能、易用的操作和良好的扩展性,为用户提供了一个高效、可靠的内部通信解决方案。通过详细的使用说明书,用户可以迅速掌握系统的使用方法,充分利用其各项功能,提升办公...

    关于JST2000集团电话某些细节的说明.doc

    JST2000系列集团电话是一款专为企业和组织设计的通信系统,具有丰富的功能和配置选项。在安装和使用该系统之前,了解并掌握一些关键的细节至关重要,以确保系统的稳定运行和高效通信。 首先,安装集团电话前需要...

    jst高级技术

    js面向对象,闭包,语法案例一些东西,值得有用,值得有用

    JST2000(E.B.W.T.AL)型集团电话使用说明书

    JST2000(E.B.W.T.AL)型集团电话使用说明书

Global site tag (gtag.js) - Google Analytics