js中将文件的base64转换成file并上传到服务器

**
 * @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'});
}

js中将文件的base64转换成file并上传到服务器的更多相关文章

ios开发-将false和true，当做字典的值，并将字典转成字符串，上传到服务器
今天遇到一个需求,将false和true,当做字典的值,并将字典转成字符串,上传到服务器. 可能这个需求大家遇到过,大部分原因是安卓的同事已经按这样的需求开发完了.我们只能跟随安卓的脚步了. (一)处 ...
HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)
说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...
java文件上传到服务器
最近项目中使用到了文件从本地到服务器的功能.其实是为了解决目前浏览器不支持获取本地文件全路径.不得已而想到上传到服务器的固定目录,从而方便项目获取文件,进而使程序支持EXCEL批量导入数据. 在前台界 ...
c#将本地文件上传至服务器（内网）
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
JS中将JSON的字符串解析成JSON数据格式《转》
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
js中把JSON字符串转换成JSON对象最好的方法
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用j ...
delphi 文件或目录转换成 TreeView
//文件或目录转换成 TreeViewprocedure DirToTreeView(Tree: TTreeView; Directory: string; Root: TTreeNode; Incl ...
Altium Designer 从导入DXF文件，并转换成板框
大多数人都知道,PADS中导入DXF文件,然后转换成板框,是很方便的.AD也同样可以做到. PADS导入DXF见:http://www.cnblogs.com/craftor/archive/2012 ...
base64字符串转文件，以及ngImgCrop裁剪图片并上传保存到服务器示例
base64字符串是包含文件格式的文件字符串,例如:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElE ...

随机推荐

【从html到算法框架】科技白学习计划书
一.学习计划根据对Web知识层次的梳理,我觉得可以把它分别以技术和思想两个维度进行分类.从技术维度上讲,Web知识有内容.结构.样式.操作(静态的修改与动态的修改(动态,例如使用定时器)).交互(与 ...
Javascript 字符串常用操作方法
1.字符串转换 /* 你可以将一个数字,布尔值,或一个字符串对象转换为字符串 */ var num= 18; var str1 = num.toString(); //'18' var str2 = ...
GJM：用C#实现网络爬虫（二） [转载]
上一篇<用C#实现网络爬虫(一)>我们实现了网络通信的部分,接下来继续讨论爬虫的实现 3. 保存页面文件这一部分可简单可复杂,如果只要简单地把HTML代码全部保存下来的话,直接存文件就行 ...
C++ Primer Plus读书笔记
第五章循环和关系表达式 1. 2.类别别名: (1) #define FLOAT_POINTER float * FLOAT_POINTER pa, pb; 预处理器置换将该声明转换成 flo ...
WPF数据绑定Binding(二)
WPF数据绑定Binding(二) 1.UI控件直接的数据绑定 UI对象间的绑定,也是最基本的形式,通常是将源对象Source的某个属性值绑定 (拷贝) 到目标对象Destination的某个属性上. ...
java笔记--策略模式和简单工厂模式
策略模式: --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3884781.html "谢谢-- 为什么使用:策略模式主要用于 ...
两个简单方法加速DataGridView
两个简单方法加速DataGridView (2009-03-24 16:57:13) 转载▼ 标签: 杂谈分类: .NET DataGridView虽然好用,但是如果数据量比较大的话就会出现性能的问 ...
maya绝招（1-20）
第一招自制MAYA启动界面在安装目录下的BIN文件夹中的MayaRes.dll文件,用Resource Hacker打开.在软件的目录树中找到“位图”下的MAYASTARTUPIMAGE.XPM并 ...
C题 - A+B for Input-Output Practice (II)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description You ...
jQuery Alert Dialogs (Alert, Confirm, & Prompt代替方案)
基本范例--原文:http://keleyi.com/keleyi/phtml/jqplug/ Alert jAlert('自定义对话框', 'Alert对话框'); Confirm jConfirm ...