<!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>

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

  1. Base64字符保存图片，图片转换成Base64字符编码

    //文件转换成Base64编码 public static String getFileBase64Str(String filePath) throws IOException { String f ...

  2. 图片转成base64位 页面中图片展示

    <img src="data:image/gif;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABG ...

  3. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. 网络图片转换到本地并转换成base64位

    /** * 网络图片转换到本地并转换成base64位 * @param $url * @return string */ public function imgzhuanhuan($url) { // ...

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

    {************************************************************************** 名称: BaseImage 参数: fn: TF ...

  6. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

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

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  8. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  9. php 处理图片 将图片转成base64

    1.直接将图片路径传入下面该方法就可以了//将图片转成base64 public function imgToBase64($img_file){ $img_base64 = ''; if ($img ...

随机推荐

  1. 如何获取浏览器URL中查询字符串的参数

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...

  2. JS函数——作用域

    一 : 作用域的相关概念 首先看下 变量作用域 的概念:一个变量的作用域是程序源代码中定义这个变量的区域.————————<javascript权威指南>第六版全局变量拥有全局作用域,函数 ...

  3. python基础：列表生成式和生成器

    列表生成式(List Comprehension) 列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成 list ...

  4. send()和recv()函数详解

    send()函数 int send( SOCKET s, const char FAR *buf, int len, int flags ); 不论是客户还是服务器应用程序都用send函数来向TCP连 ...

  5. SPL的基本使用

    SPL是Standard PHP Library(PHP标准库)的缩写. 根据官方定义,它是"a collection of interfaces and classes that are ...

  6. ajax读取txt文件

    注意url为网络路径 <html><head><script type="text/javascript">  function loadXML ...

  7. WIFI无线adb调试android

    有个需求需要支持android插上键盘,鼠标等外设,但是这样就不能使用microusb口进行adb调试了. 研究了一番,发现可以利用wifi进行adb无线调试(adb应该本身已经支持无线调试). WI ...

  8. SQL Server 加密层级

    ---------------------------------------------------------------------------------------------------- ...

  9. Oracle EBS-SQL (MRP-2):检查期间主计划录入记录数.sql

    SELECT      FU.description                           创建者,      MSD.CREATION_DATE             创建日期,   ...

  10. Delphi Window 消息大全使用详解

    WM_CTLCOLORSTATIC = $0138; 当一个静态控件将要被绘制时发送此消息给它的父窗口:通过响应这条消息,所有者窗口可以通过使用给定的相关显示设备的句柄来设置静态控件的文本和背景颜色 ...