首页 > 其他分享 >220-jquery,将base64的图片,转为file文件,并通过$.ajax上传

220-jquery,将base64的图片,转为file文件,并通过$.ajax上传

时间:2023-11-20 23:33:05浏览次数:32  
标签:jquery function const base64 ajax blob file new

var base64 = '';
const blob = dataURLToBlob(base64);
  const file = blobToFile(blob, 'image.jpg');

  uploadImage(file);
  
  
function dataURLToBlob(base64) {
  const parts = dataURL.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const byteCharacters = atob(parts[1]);
  const byteArrays = [];

  for (let i = 0; i < byteCharacters.length; i++) {
    byteArrays.push(byteCharacters.charCodeAt(i));
  }

  return new Blob([new Uint8Array(byteArrays)], { type: contentType });
}

function blobToFile(blob, fileName) {
  return new File([blob], fileName, { type: blob.type });
}
function uploadImage(file) {
            var formData = new FormData();
            formData.append("picFile", file);
            // 发送 AJAX 请求上传文件
            $.ajax({
                url: "/upload/img-upload-local", //
                type: "POST",
                async:false,
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    $(".div1").hide();
                    $(".div2").hide();
                    $("#showImg").attr("src",res.url)
                    $(".imgDiv").show();
                    closeCamera();

                },
                error: function() {
                    alert("上传失败");
                }
            });
        }

标签:jquery,function,const,base64,ajax,blob,file,new
From: https://blog.51cto.com/u_14816966/8492109

相关文章

  • Base64编码、解码 C语言例子(使用OpenSSL库)----亲测OK
    摘自:https://www.dandelioncloud.cn/article/details/1498198300963708930 //Base64Util.h#ifndef__BASE64_UTIL_H__#define__BASE64_UTIL_H__#ifdef__cplusplus//告诉编译器,这部分代码按C语言的格式进行编译,而不是C++的extern"C"{#endifstring......
  • AJAX跨域代理机制实现原理解析------AJAX
    httpClient发送packagecom.bjpowernode.httpClient;importorg.apache.http.HttpEntity;importorg.apache.http.HttpResponse;importorg.apache.http.client.methods.HttpGet;importorg.apache.http.impl.client.CloseableHttpClient;importorg.apache.http.impl.cl......
  • 关于jquery显示部分li元素的方法
    <!--如果大于等于3只显示到这里剩下的4和5不显示-->$('.oneulli:gt(3)').hide();$('.oneulli:last').show();<!--点这个显示4和5-->$('.oneulli:last').click(function(){$('.oneulli:gt(3)').show();}); <divclass="o......
  • AJAX手写JQuery框架封装AJAX请求和常见方法实现项目功能省市联动查询效果------AJAX
    建立一个SQL表CREATETABLEt_stu(idBIGINTAUTO_INCREMENTPRIMARYKEY,usernameVARCHAR(255),ageINT,addressVARCHAR(255));INSERTINTOt_stu(id,username,age,address)VALUES(NULL,"zhangsan",15,"广州")INSERTINTOt_stu(id,username,age,address)......
  • axios、ajax、fetch三者的区别
    1.ajax:是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新优缺点:1)局部更新2)原生支持,不需要任何插件3)原生支持,不需要任何插件4)可能破坏浏览器后退功能5)嵌套回调,难以处理2.axios:是一个基于promise的HTTP......
  • BASE64加密解密
    https://base64.supfree.net/  ......
  • 算法~base64算法理解
    base64Base64是一种用于将二进制数据编码成ASCII字符的编码方式。它主要用于在文字环境中传输或存储二进制数据,如在电子邮件、XML文件、URL参数等。Base64编码不是一种加密算法,而是一种编码方式,其主要作用是将二进制数据转换为文本数据,以便更容易在文本协议中处理。Base64......
  • 转载——jQuery的formValidator详细使用教程
    原文链接使用插件必须加载的文件//加载jQuery类库<scripttype="text/javascript"src="jquery-1.7.1.min.js"></script>//加载插件<scripttype="text/javascript"src="formValidator-4.1.1.min.js"></script>//加载扩展库(如果想用里......
  • 界面控件Kendo UI for jQuery R3 2023 - 发布全新金字塔图表类型
    Telerik & KendoUI R32023版本带来了30多个新的UI组件,丰富的设计系统文档、多种自定义选项、支持Linux的现代化报表体验等。借助R32023,开发人员能够在现代框架上快速构建强大的数字体验功能,满足不断变化的业务需求等。今天将为大家主要介绍KendoUIforjQuery R32023的一......
  • Ajax基本原理
    AJAX(AsynchronousJavaScriptandXML)是一种基于JavaScript和XML技术的前端通信方式,可以在不刷新页面的情况下向服务器发送请求,并接收响应数据,实现了前后端的无感通信。本文将介绍AJAX的原理及实现方式。在传统的Web应用中,前端页面通过表单提交或者超链接的方式向服务器......