base64转图片上传

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

/**

* @param base64Codes

*            图片的base64编码

*/

function sumitImageFile(base64Codes){//debugger

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 : localStorage.imUrl+‘/plugins/zatp?cmd=upload‘,

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‘});

}

时间: 2024-10-24 13:06:20

base64转图片上传的相关文章

laravel结合七牛实现base64的图片上传

确保传到后台的是纯base64字符串而不是以data开头的 //base64图片上传 public function uploadCompressImg(Request $request) { $base64 = preg_replace("/\s/",'+',$request->input('img')); $img = base64_decode($base64); $disk = \Storage::disk('qiniu'); //使用七牛云上传 $img_name =

图片预览 base64 element 图片上传 预览图

https://www.jianshu.com/p/bee8c393c422 感谢 使用了element ui,愿望是   选择图片文件之后,不立即上传,先显示预览图,点击上传按钮之后再上传,element版本是2.13 用到了 URL.createObjectURL(file.raw) html <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/&

ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/1237/csharp UpoladService示例代码: public class UpoladService : IUpoladService {     private readonly static string[] _imageExtensions = new string[] { ".jpg", ".png", ".gif&quo

MVC微信浏览器图片上传(img转Base64)

因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器 话不多说, 贴代码 先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片上传--> <section class="logo-license"> <div class="half"> <div class="uploader"> <a class="license

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

实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般会选择存图片路径的方式,这样有助于减小数据库压力,base64 编码后的图片信息是一个很长的字符串,一般我们使用longText类型来将其存入数据库. html代码如下: <div class="col-sm-6"> <img id="headPortraitI

base64图片上传,推到又拍云

Html部分 <label> <img id="nvhai" src="{$agent.id|get_headimg}" height="70px" width="70"> <input style="display:none" id="tou" type="file" onchange="previewFile()"

使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不够. 下面我们就说说,利用canvas 生成带水印的图片. 1.我们要实现一下效果 2.创建一个canvas var canvas = document.createElement('canvas'); var time = new Date(); var logoCanvas =time+' '+

base64图片上传

图片上传 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet

.Net Core 图片上传FormData和Base64

缓冲和流式传输是上传文件的两种常用方案,这里主要演示流式传输. 1.Net Core MVC Form提交方式: 前端页面 form表单提交: 1 <form id="uploadForm"> 2 图片上传: <input type="file" name="file" multiple value="选择" onchange="doUpload()" id="ajaxfile&