<!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. VS单元测试入门实践教程

    摘要:本教程不会介绍单元测试的基本理论知识,也不会和大家讨论在实际项目中是否需要写单元测试代码的问题.但是如果你此时想使用VS中的单元测试的工具来测试某个方法是否正确,可你又从来没真正实践过,那么本教 ...

  2. Android自定义工具类获取按钮并绑定事件（利用暴力反射和注解）

    Android中为按钮绑定事件的有几种常见方式,你可以在布局文件中为按钮设置id,然后在MainActivity中通过findViewById方法获取按钮对象实例,再通过setOnClickListe ...

  3. 普通用户登录Oracle DB Control

    使用 sys 或者 system 用户登录 Oracle DB Control 是没有问题的. 但是,如果是普通的用户需要登录Oracle DB Control,建表或者视图之类的, 则需要授权 SE ...

  4. C# 封装 System.Data.SQLite

    参考1: 关于如何使用System.Data.SQLite的入门: http://www.dreamincode.net/forums/topic/157830-using-sqlite-with-c ...

  5. java创建对象的几种常用方法

    java几种常见的创建对象的方法: 1.使用new关键字创建对象 2.利用java的反射机制,通过java.lang.Class或者java.lang.reflect.Constructor创建对象 ...

  6. php将unicode编码转为utf-8方法

    介绍 在前端开发中,为了让中文在不同的环境下都能很好的显示,一般是将中文转化为unicode格式,即\u4f60,比如:"你好啊"的 unicode编码为"\u4f60\ ...

  7. 解决Linux文档显示中文乱码问题以及编码转换

    解决Linux文档显示中文乱码问题以及编码转换 解决Linux文档显示中文乱码问题以及编码转换 使vi支持GBK编码 由于Windows下默认编码是GBK,而linux下的默认编码是UTF-8,所以打 ...

  8. SQLServer 2008 R2 清空日志文件

    USE [master]GOALTER DATABASE FH2_SJH SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE FH2_SJH SET RE ...

  9. javascript 数据结构和算法读书笔记 > 第四章 栈

    1. 对栈的操作 栈是一种特殊的列表,栈中的元素只能通过列表的一端进行访问,即栈顶.类似于累起一摞的盘子,只能最后被放在上面的,最先能被访问到. 就是我们所说的后入先出(LIFO). 对栈主要有入栈p ...

  10. python----面向对象：1类的定义

    1.python中定义类的格式如下: class className(baseClassName): def functionName(argslist): 2.定义一个person类:它有一个Nam ...