<!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. asp.net mvc表单提交的几种方式

    asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...

  2. SQL语句优化(转摘)

    (1) 选择最有效率的表名顺序(只在基于规则的seo/' target='_blank'>优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最 ...

  3. 读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit

    读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit Author: Andrew Hunt ,David Thomas with Matt ...

  4. JS 精粹(方法）

    数组方法: 模拟队列的操作:push()/shift();unshift()/pop();模拟栈操作:push()/pop(); push()返回增加后的长度.unshift也是.pop和shift返 ...

  5. POJ 3279(Fliptile)题解

    以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定长宽的黑白棋棋盘摆满棋子,每次操作可以反转一个位置和其上下左右共五个位置的棋子的颜色,求要使用最少翻转次数将所有棋子反转为黑 ...

  6. mysql 的基础知识

    这边博客,纯为了摘录 mysql 常用的一些操作,如果你已经懂了,可以忽略,谢谢. 最基本的mysql操作 1.查询mysql 的版本和当前时间信息 select version(),current_ ...

  7. 关于google CDN 在中国访问不了的解决办法

    因原网站的script部分使用了google CDN,导致在中国看不了跟google相关的所有东西 解决方法: 得把google CDN 连接改成其他公司的CDN 例: 修改前:<script ...

  8. LED发光二极管

    半导体发光器件包括半导体发光二极管(简称LED).数码管.符号管.米字管及点阵式显示屏(简称矩阵管)等.事实上,数码管.符号管.米字管及矩阵管中的每个发光单元都是一个发光二极管. 一. 半导体发光二极 ...

  9. Aix6.1安装openssh

    一.软件下载 1.官方网站下载: openssl IBM官方网站下载:https://www14.software.ibm.com/webapp/iwm/web/reg/download.do?sou ...

  10. php这样实现伪静态

    mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法 1.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查 ...