不成功,但是有一定的借鉴性

 /**
* @param base64Codes
* 图片的base64编码
*/
function sumitImageFile(base64Codes){
console.log(convertBase64UrlToBlob(base64Codes));
var formData = new FormData(); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数 //convertBase64UrlToBlob函数是将base64编码转换;为Blob
formData.append("imageName",convertBase64UrlToBlob(base64Codes)); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
try{ // upload("admin","img","haode",formData);
}catch(e){
console.log(e);
alert("TMD又错了!");
}
//ajax 提交form
$.ajax({
url : url,
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data){
console.log(data);
alert("hahaha");
},
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/jpeg'});
}

base64转图片上传的更多相关文章

  1. PHP base64多图片上传

    // 多图片上传,base64 public function upload_multi() { $pic = $_POST['pic']; if (!$pic) { $this->json-& ...

  2. 微信支付特约商户进件中base64格式图片上传

    微信图片上传接口地址:https://api.mch.weixin.qq.com/v3/merchant/media/upload 1.上传方法 1 using HttpHandlerDemo; 2 ...

  3. php base64编码图片上传七牛

    上网上找了好几个例子 都是自己写curl上传 感觉七牛这么多年了不应该sdk不提供一个方法 然后试 试 试 显示put 方式 上传上去 就是个字符串 后来换成文件上传方法 putFile 成了 不废话 ...

  4. JavaUtil 处理Base64的图片上传

    UploadImageBase64.java package com.lee.util; import java.io.File; import java.io.FileOutputStream; i ...

  5. ios base64图片上传失败问题

    今天做图片上传,后台用的是base64解密图片二进制文件,以前都是用表单上传来解决图片上传的,现在后台没有人改,所以研究下base64上传. 需要将图片base64加密,但是调用 [data base ...

  6. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. tp5 base64 图片上传

    /** * 保存图片 */ public function uploads($value='') { // $file = base64_decode(request()->file('imag ...

  9. js实现图片上传预览功能,使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

随机推荐

  1. Mysql与Sql server,Sum函数跟Count函数

    两者均是统计类函数,都不计算NULL字段!!! 单纯计算行数的话,count的效率比sum的效率高 MySQL SUM()函数介绍 SUM()函数用于计算一组值或表达式的总和,SUM()函数的语法如下 ...

  2. linux下WPS的使用

    WPS退出了wps for linux ,高版本的一直安装不上,低版本的原来在桌面都有图标,重装后安装位置不是很明显打开关闭不是很方便.并且也不利于在终端模式下使用.现简单总结一下wps的表格 文字 ...

  3. arch搭建SVN服务器

    一.安装 Install the package Install subversion from the official repositories. Create a repository Crea ...

  4. URLConnection简单使用

    1 --get提交 //资源url地址 URL url = new URL("http://localhost:8080/test/TestServlet?id=10"); //获 ...

  5. SpringBoot | 第五章:多环境配置

    前言 写上一篇看英文资料,耗费了心力呀,这章,相对来说简单点.也比较熟悉,但是这很实用.不扯了,开始~ 多环境配置 maven的多环境配置 springboot多环境配置 总结 老生常谈 多环境配置 ...

  6. dell电脑 win8换win7重启报错及解决方案

    Win8换win7 bios 识别不到usb选项 按以下操作即可: 把Secure Boot control 改为Disabled 的,F10保存重启,F12进入bios选择usb启动即可: 安装完系 ...

  7. log4net 最快速体验

    本文供实习司机快速上手log4net最基本功能,共4步,3分钟搞定. 一.添加log4net.dll引用,可使用nuget安装或直接引用文件 二.添加配置 在app.config或web.config ...

  8. 学习笔记:SVG和Canvas

    SVG SVG 与 Flash 类似,都是用于二维矢量图形,二者的区别在于,SVG 是一个 W3C 标准,基于 XML,是开放的.因为是 W3C 标准,SVG 与其他的 W3C 标准,比如 CSS.D ...

  9. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

  10. JAXB介绍一

    参考博客: https://www.cnblogs.com/chenbenbuyi/p/8283657.html https://www.cnblogs.com/cnsdhzzl/p/8390514. ...