javascript 图像上传JS(最大上传次数)

mv1qrgav 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(154)

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

我需要一个上传3张图片的限制，也像坏字错误代码
我尝试了每一个代码，并将其添加在中间，它似乎不工作或打破代码

JavaScript

来源：https://stackoverflow.com/questions/74931826/image-upload-js-max-uploads

2条答案

按热度按时间

x8diyxa71#

对于多重选择，在文件选择器对话框中按ctrl按钮并选择多个文件。

- 您可以尝试以下逻辑：**

function fileCheck(ev) {
        let files = ev.target.files;
        if (files.length > 3) {
          alert("max upload is 3");
          ev.target.value = "";
          // if form then you can use form.reset()
          return;
        }

        for (let i = 0; i < files.length; i++) {
          let file = new FileReader();
          file.readAsDataURL(files[i]);

          file.onloadend = (ev2) => {
            document.body.innerHTML += `
        <img src=${ev2.currentTarget.result} width="200" height="200">
        `;
          };
        }
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" multiple onchange="fileCheck(event)" />
  </body>
</html>

赞(0）回复(0）举报 2022-12-28

vfhzx4xs2#

对于多重选择，在文件选择器对话框中按ctrl按钮并选择多个文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <input type="file" id="files" multiple />
    <script>
      $(document).ready(() => {
        $('#files').change(function (ev) {
          let files = ev.target.files;
          if (files.length > 3) {
            alert('max upload is 3');
            ev.target.value = '';
            // if form then you can use form.reset()
            return;
          }

          for (let i = 0; i < files.length; i++) {
            let file = new FileReader();
            file.readAsDataURL(files[i]);

            file.onloadend = (ev2) => {
              document.body.innerHTML += `
        <img src=${ev2.currentTarget.result} width="200" height="200">
        `;
            };
          }
        });
      });
    </script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 图像上传JS(最大上传次数)

2条答案

相关问题

热门标签

最新问答