使用javascript把图片转成base64位编码,然后传送到服务端(ajax调用的接口基于drupa7)

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

 

posted @ 2015-12-14 16:12  脉醉  阅读(2662)  评论(0编辑  收藏  举报