前端如何将图片上传至后端如何生成二维码

在这里插入图片描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
  <head>
    <title>Javascript 二维码生成库：QRCode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=no"
    />
    <script
      type="text/javascript"
      src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="http://static.runoob.com/assets/qrcode/qrcode.min.js"
    ></script>
    <style>
      img {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <input id="text" type="text" value="你好世界" style="width: 80%" /><br />
    <div
      id="qrcode"
      style="width: 100px; height: 100px; margin-top: 15px"
    ></div>
    <br />
    <div class="input-file-box">
      <span>点击上传图片</span>
      <input type="file" id="uploadfile" multiple />
    </div>
    <div id="img-box" style="width: 200px; height: 100px"></div>
    <script type="text/javascript">
      window.onload = function () {
        var input = document.getElementById("uploadfile");
        var div;
        // 当用户上传时触发事件
        input.onchange = function () {
          console.log(this);
          readFile(this);
        };
        //处理图片并添加都dom中的函数
        var readFile = function (obj) {
          // 获取input里面的文件组
          var fileList = obj.files;
          console.log(fileList);
          //对文件组进行遍历，可以到控制台打印出fileList去看看
          for (var i = 0; i < fileList.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(fileList[i]);
            // 当文件读取成功时执行的函数
            reader.onload = function (e) {
              console.log(this.result);
              div = document.createElement("div");
              div.innerHTML = '<img src="' + this.result + '" />';
              document.getElementById("img-box").appendChild(div);
            };
          }
        };
      };

      var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100,
      });

      function makeCode() {
        var elText = document.getElementById("text");
        console.log(elText.value);
        if (!elText.value) {
          alert("Input a text");
          elText.focus();
          return;
        }

        qrcode.makeCode(elText.value);
      }

      makeCode();

      $("#text")
        // .on("blur", function () {
        //   makeCode();
        // })
        .on("keydown", function (e) {
          if (e.keyCode == 13) {
            makeCode();
          }
        });
    </script>
  </body>
</html>
前端如何将图片上传至后端如何生成二维码

おすすめ
