<!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. javascript设计模式——Singleton

    单例模式指的是只能被实例化一次. 推荐阅读: http://blog.mgechev.com/2014/04/16/singleton-in-javascript/ 比较通用的一种Singleton模 ...

  2. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

  3. Excel 用row()函数 在Excel中自动添加序号,

    1.如图 2.用if条件根据产品名称判断是否有值进而序号自动添加 If(G9="","",Row()-8)

  4. php调用java类文件

    最近在折腾php调用java类,网上查阅资料,最终选用JavaBridge,遇到的第一个问题是java_require() 函数引入自定义java打包而成的jar文件,在新版本的JavaBridge中 ...

  5. Oracle数据导入导出imp/exp（转）

    在oracle安装目录下有EXP.EXE与IMP.EXE这2个文件,他们分别被用来执行数据库的导入导出.所以Oracle数据导入导出imp/exp就相当与oracle数据还原与备份. 一.Oracle ...

  6. perl 创建包

    <pre name="code" class="python"><pre name="code" class=" ...

  7. 一个js爬虫

    1. 第一个demo 2. configs详解——之成员 3. configs详解——之field 4. configs详解——之site, page和console 5. configs详解——之回 ...

  8. web本地存储-IndexedDB

    IndexedDB, HTML5中的一种数据存储方式,索引数据库. 一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称.一个数据库可包含多个对象存储,一个对象存储相当于 ...

  9. 【转载】详解java类的生命周期

    原文地址:http://blog.csdn.net/zhengzhb/article/details/7517213 引言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑, ...

  10. ar解压deb包

    解压文件 ar -x libstdc++6_4.7.2-5_i386.deb tar -zxvf data.tar.gz