使用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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM