<!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. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  2. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  3. select Into用法

    1. insert into 表(列1,列2) select 列1,列2 from 表2 where.... 2.select * into 表2 from 表 1where... 上面写法标识将表1 ...

  4. 几个Python oj的网站

    http://www.rqnoj.cn/ http://www.pythontip.com/

  5. 在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作

    -(void)viewDidLayoutSubviews { if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)] ...

  6. Node.js服务的重启与监控

    开始:Node +服务文件名 停止:直接快捷键Ctrl+C 监控:1.安装 npm install supervisor -g, 2.supervisor app.js 参考:http://blog. ...

  7. Java面试题整理（题目内容非原创）

    面试题分类: 1.java 基础面试题 Java基础中对于io 中文件的读.写,util中的list map set这些要分清楚 还有线程.socket 都需要了解下 参考链接:http://blog ...

  8. Molecule to atoms

    For a given chemical formula represented by a string, count the number of atoms of each element cont ...

  9. EditPlus 快速去重

  10. 国标电表DLT645转MODBUS TCP协议转换器MRD-5021,工业设备，浪涌三级保护MRD

    DL/T645转ModbusTcp协议转换器 MRD-5021具有1 路RS485及1路以太网接口,最多支持同时采集5个DL/T645-1997或者5个2007协议国标电表设备,支持DL/T645协议 ...