使用javascript把图片转成base64位编码,然后传送到服务端(ajax调用的接口基于drupa7)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src=‘http://code.jquery.com/jquery-1.9.1.min.js‘></script>
    <script src=‘jquery.base64.js‘></script>
    <script type="text/javascript">

        //base64转码函数
        function base64(file, callback)
        {
            var coolFile = {};
            function readerOnload(e)
            {
                var base64 = btoa(e.target.result);
                coolFile.base64 = base64;
                callback(coolFile)
            };

            var reader = new FileReader();
            reader.onload = readerOnload;

            var file = file[0].files[0];
            coolFile.filetype = file.type;
            coolFile.size = file.size;
            coolFile.filename = file.name;
            reader.readAsBinaryString(file);
        }

        function aa()
        {

            //var preview = document.querySelector(‘img‘);
            //var file    = document.querySelector(‘#files‘).files[0];
            var name = $(‘#files‘).val();

          base64($(‘input[type="file"]‘), function(data)
          {
                //console.log(data.base64)
              var data = {
                  "file":{
                      "file":data.base64,
                      "filename":name,
                      "filepath":"public://"+name
                  }
              };

              options = {
                  type:"post",
                  data:data,
                  url: "http://demo.dd:8083/userapi/app_services/UploadFile",
                  dataType: ‘json‘,
                  success:function(result){
                      console.log(JSON.stringify(result));
                  }
              };
              $.ajax(options);
          })

        }

    </script>
</head>
<body>
<input type="file" id="files" value="图片上传">
<input type="button" value="上传" id="bb" onclick="aa()">

<br>
<hr>
<img src="" height="200" alt="Image preview...">
</body>
</html>
时间: 2024-10-17 18:34:50

使用javascript把图片转成base64位编码,然后传送到服务端(ajax调用的接口基于drupa7)的相关文章

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

js绝对地址图片转换成base64的方法

//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); //为了解决跨域,可以直接img.crossOrigin=''就能解决图片跨域问题 img.crossOrigin = 'xes'; img.onload = function(){ canvas

按比例压缩图片和图片转换成BASE64

通常会需要将突破转换为字符串的操作,贴此详例,仅供参考和积累 #region 按比例压缩图片和图片转换成BASE64 /// <summary> /// 按照比例缩小图片 /// </summary> /// <param name="srcImage">要缩小的图片</param> /// <param name="percent">缩小比例</param> /// <returns&g

浏览器端将语音转换为URL格式的字符串(base64 位编码)

我们可以在浏览器端,通过调用 JS 原生的 API,将语音转换为文字,实现语音输入的效果.思路是: 录制一段音频: 将音频转换为 URL 格式的字符串(base64 位编码): 调用讯飞开放接口,将 base64 位编码转换为文本. 这篇文章实现前两步,将音频转换为 URL 格式的字符串(base64 位编码). 这里将会用到于媒体录制相关的诸多 API,先将其列出: MediaDevices (MediaDevices 使用方法) MediaDevices 接口提供访问连接媒体输入的设备,如照

JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士.曾任沈阳东软股份项目经理.51CTO学院签约讲师.从事软件研究和开发超过20年.长久以来一直从事Java.Android.iOS.C++.Swift.Objective-C以及跨平台游戏引擎(Cocos2d-x.Unity3D等)的开发和技术指导工作.对国内外相关领域的技术.理论和实践有很深的理解和研究. 主要著作包括<Cocos2d-x实战游戏开发指南>(即将出版).<Swift权威指南>.<Android深度探索 卷1和卷2>

uni-app图片压缩转base64位 利用递归来实现多张图片压缩

//选择图片 chooseImage(){ let that =this uni.chooseImage({ sizeType: ['original','compressed'], //可以指定是原图还是压缩图,默认二者都有 count: 9,//默认9 success: (rem) => { console.log(rem) that.tempFilePaths = rem.tempFilePaths; //#ifdef MP-WEIXIN //图片压缩并转base64 that.weixi

delphi将图片转换成Base64编码函数

{************************************************************************** 名称: BaseImage 参数: fn: TFilename 返回值: string 功能: 将fn文件转换成Base64编码,返回值为编码 **************************************************************************} function BaseImage(fn: str

img图片转成base64

方法一:canvas <script type="text/javascript"> var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; //var img = "http://127.0.0.1/base64/1.jpg"; function getBase64Image(img) { var canvas = docume

将图片转成base64写进hml,无需依赖本地文件

因项目需求更改,本来html中的图片是需要本地图片支持的,结果改了  经过自己查阅资料,轻松搞定 1,通过base64encodee.encode(byte[]) ,将文件的字节数组传入,得到一个字符串  str, 2,标签<img  src=""/ >,   将 字符串 """data:image/jpeg;base64," 放到str 前面 例子:<img src='data:image/jpeg;base64,iVBORw