程序员经验分享-hwhale

Javascript - 检查“dragenter”上的文件类型

2024-04-14

我试图仅允许 jpg 文件，当您拖动/拖动时，如果至少有一个被拖动的文件不是 jpg，那么我想显示错误消息，否则只显示活动的放置区。我无法获得仅检查 jpg 文件的正确语法...即使文件时间是 jpg，我也会不断触发错误消息（无论我做错了什么，也会导致 dropzone 出现一些错误行为，所以如果你想真正将 jpg 文件放入其中，你必须快速释放。）

这是我所拥有的（与拖移相同的代码）

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
    if (img) container.classList.add("active");
    else {} error.innerHTML = "Error HTML removed for readability";
    error.classList.remove("hideit");
  },
  false
);

let uploadButton = document.getElementById("upload-button");
let chosenImage = document.getElementById("chosen-image");
let fileName = document.getElementById("file-name");
let container = document.querySelector(".drag-area");
let submit = document.getElementById("submit");
let sub2 = document.getElementById("sub2");
let error = document.getElementById("error");
let imageDisplay = document.getElementById("image-display");

const fileHandler2 = (file, name, type) => {
  if (type.split("/")[1] !== "jpeg") {
    //File Type Error
    container.classList.remove("dropped");
    submit.classList.remove("hideit");
    error.innerHTML = "<span class=\"error-m\">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
    error.classList.remove("hideit");
    setTimeout(function(){
         error.innerHTML="";
        error.classList.add("hideit");


       },90000);
    return false;
  }
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    //image and file name
    let imageContainer = document.createElement("figure");
    let img = document.createElement("img");
    img.src = reader.result;
    imageContainer.appendChild(img);
    imageContainer.innerHTML += `<div id="caption">${name}</div>`;
    imageDisplay.appendChild(imageContainer);
  };
};

//Upload Button
uploadButton.addEventListener("change", () => {
  imageDisplay.innerHTML = "";
  container.classList.add("dropped");
submit.classList.add("hideit");
  Array.from(uploadButton.files).forEach((file) => {
    fileHandler2(file, file.name, file.type);
  });
});

container.addEventListener(
  "dragenter",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
    if (img) container.classList.add("active");
    else {} error.innerHTML = "<span class=\"error-m\">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
    error.classList.remove("hideit");
  },
  false
);

container.addEventListener(
  "dragleave",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
  },
  false
);

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
    if (img) container.classList.add("active");
    else {} error.innerHTML = "<span class=\"error-m\">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
    error.classList.remove("hideit");
  },
  false
);

container.addEventListener(
  "drop",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
      container.classList.add("dropped");
    submit.classList.add("hideit");
        error.classList.add("hideit");

    let draggedData = e.dataTransfer;
    let files = draggedData.files;
    imageDisplay.innerHTML = "";
    Array.from(files).forEach((file) => {
      fileHandler2(file, file.name, file.type);
    });
  },
  false
);

window.onload = () => {
  error.innerText = "";
};
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

img, video {
    height: auto;
    max-width: 100%;
}

body {
  background-color: #FCFCFC;
}


.mglass {
  width: 34px;
margin-left: auto;
margin-right: 10px;
opacity: 0.343;
}
.dd-t2 {
  font-size: 13px;
    color: #9e9e9e;
}

.hideit {
  display: none !important;
}

.upl-top {
  margin-bottom: 16px;
  width: 80%;
  display: inline-block;
}

.upl-top-right {
  width: 19%;
  display: inline-block;

}

.u-left {
  border-radius: 3px;
}

.up-head {
  font-size: 18px;
    color: #2b2b2b;
    font-weight: 500;
}

.container-ck {
    background-color: #ffffff;
    width: 768px;
    min-width: 37.5em;
    padding: 3.12em 1.87em;
    /* position: absolute; */
    /* transform: translateX(-50%); */
    left: 50%;
    top: 1em;
    box-shadow: 0 1.25em 3.43em rgba(0, 0, 0, 0.08);
    border-radius: 0.5em;
    margin: auto;
    margin-top: 65px;
}

.ck-btn {
    padding-top: 6px;
}

input[type="file"] {
  display: none;
}
label {
  display: block;
  position: relative;
  background-color: #025bee;
  color: #ffffff;
  font-size: 1.1em;
  text-align: center;
  width: 11em;
  padding: 1em 0;
  border-radius: 0.3em;
  margin: 0 auto 1em auto;
  cursor: pointer;
}
#image-display {
  position: relative;
  width: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  gap: 21px;
  flex-wrap: wrap;
}
#image-display figure {
  width: 48%;
}
#image-display img {
  width: auto;
height: auto;
}
#image-display figcaption {
  font-size: 0.8em;
  text-align: center;
  color: #5a5861;
}

#error {
    text-align: center;
    color: #ff9191;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #ffffffa8;
    z-index: 9999;
    backdrop-filter: blur(3px);
    cursor: default;
}





















.container22 {
  max-width: 440px;
  background: #fff;
      border-radius: 8px;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      margin: auto;
      max-width: 780px;
      padding: 17px;
      margin-top: 20px;
}

.overflow-x-hidden {
  overflow:visible;

    width: 640px;
    margin: auto;
    margin-top: 90px;


}

.i-right {
  height: 29px !important;
}

.dd-t {
      font-size: 14px;
}


.t2-line {
  line-height: 19px;
}

html {
 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
 line-height:1.5
}

.container22{
  max-width: 594px;
}


.drag-area {
     min-height: 285px;
  border: 2px dashed #e0eafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background: #fafafa;
  display: flex;
flex-direction: column;
align-items: center;
    padding: 17px;
border-width: 2px;
border-radius: 8px;
border-color: #656fd0;
border-style: dashed;
background-color: rgb(250, 250, 250);
color: rgb(189, 189, 189);
outline: none;

cursor: pointer;
position: relative;
}

h3 {
  margin-bottom: 20px;
  font-weight: 500;
}

.drag-area .icon {
  font-size: 50px;
  color: #1683ff;
}

.InlineSVG {
  display: inline;
}

.flex {
  display: flex;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}


.drag-area .button {
    padding-top: 5px;
    padding-bottom: 0px;
}

input {
    height: 34px;
    border: 1px solid #d2d4de;
    padding-left: 13px;
    border-radius: 4px;
    font-size: 14px;
}

.justify-center {
    justify-content: center;
}


.drag-area .header {
  font-size: 20px;
  font-weight: 500;
  color: #34495e;
}

.drag-area .support {
    font-size: 13px;
    color: #a3a3a3;
    margin: 10px 0 15px 0;
    font-weight: 300;
}

.top-out {
  width: 100%;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 18px;
}

.icon-outer1 {
      justify-content: center;
          margin-bottom: 4px;
}

#sub2 {
    margin-left: 2px;

}

#submit {
margin-top: -1px;
  text-align: center;
}

.drag-area .button {
    font-size: 13px;
    font-weight: 400 !important;;
    color: #fafafa;
    cursor: pointer;
    background: #656fd0 !important;
    border-radius: 5px;
  margin-top: 20px;
    margin-bottom: 7px;
    min-height: 33px;
}

.hideit {
  display: none !important;
}

.dropped {
  padding: 0;
    margin: 0;
    border: none;
    background: transparent;

}

.drag-area.active {
  border-color: #656fd0;
border-style: solid;
opacity: 1;
}

.drag-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.download {
  background-color:#4CAF50;
  border: none;
  color: white;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 3px 1px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
}


.uploader-svg {
  height: 26px !important;
  opacity: .2;
  width: auto !important;
margin: 9px;
}
<body>
    <div class="container22">

      <div class="drag-area">
        <div id="error" class="hideit"></div>
        <div id="image-display"></div>

    <div id="submit">
        <div class="flex icon-outer1"><svg class="icon faded uploader-svg" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 91.27"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>picture</title><path class="cls-1" d="M87.29,16.88A11.35,11.35,0,1,1,75.94,28.23,11.35,11.35,0,0,1,87.29,16.88Zm27.33,74.39H8.26a8.27,8.27,0,0,1-5.83-2.44h0A8.24,8.24,0,0,1,0,83V8.26A8.26,8.26,0,0,1,2.42,2.42h0A8.26,8.26,0,0,1,8.26,0H114.62a8.26,8.26,0,0,1,5.83,2.43h0a8.26,8.26,0,0,1,2.42,5.84V83a8.24,8.24,0,0,1-2.42,5.83h0a8.27,8.27,0,0,1-5.83,2.44Zm-7.35-9.43L87.6,50.46a4.52,4.52,0,0,0-7.65,0L70.66,65.39,80.77,81.84H76.62l-27.57-44c-2.54-3.39-6.61-3.13-8.88,0l-27,44H9.42V9.42h104V81.84Z"/></svg><div class="ms-2 me-2" style="height: 44px; border-left: 1px solid rgb(203, 203, 203);"></div><svg class="icon faded uploader-svg i-right"  id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 98.27"><title>photos</title><path d="M4.84,27.31H90.76a4.77,4.77,0,0,1,3.4,1.41,4.84,4.84,0,0,1,1.41,3.4V93.47a4.75,4.75,0,0,1-1.41,3.39,1.36,1.36,0,0,1-.25.22,4.67,4.67,0,0,1-3.18,1.19H4.81A4.81,4.81,0,0,1,0,93.47V32.12a4.77,4.77,0,0,1,1.41-3.4,4.83,4.83,0,0,1,3.4-1.41ZM32.15,0h85.92a4.77,4.77,0,0,1,3.4,1.41,4.84,4.84,0,0,1,1.41,3.4V66.16a4.75,4.75,0,0,1-1.41,3.39,1.09,1.09,0,0,1-.25.22A4.67,4.67,0,0,1,118,71h-5.38V65.22h4.51V5.71H33.06v4.2H27.31V4.81a4.77,4.77,0,0,1,1.41-3.4A4.84,4.84,0,0,1,32.12,0ZM18.5,13.66h85.92a4.75,4.75,0,0,1,3.39,1.41,4.8,4.8,0,0,1,1.41,3.39V79.81a4.77,4.77,0,0,1-1.41,3.4,1.4,1.4,0,0,1-.25.22,4.67,4.67,0,0,1-3.18,1.19H99V78.88h4.51V19.37H19.4v4.2H13.65V18.46a4.81,4.81,0,0,1,4.81-4.8ZM24.68,44a6.9,6.9,0,1,1-6.89,6.89A6.89,6.89,0,0,1,24.68,44Zm29,29.59L67.49,49.71,82.14,86.77H13.77V82.18l5.74-.29,5.75-14.08,2.87,10.06h8.62l7.47-19.25L53.7,73.56ZM89.86,33H5.75V92.53H89.86V33Z"/></svg></div>
          <div class="2-line-top t2-line"><span class="dd-t">Drag &amp; drop <u>or</u> </span> </div> <div class="2-line-bottom t2-line"> <span class="dd-t">browse for photo(s)</span> </div><input type="file" id="upload-button" multiple accept="image/*" />
        <label class="ck-btn flex self-end justify-center px-4 py-2 mt-5 text-sm font-medium text-white transition duration-150 ease-in-out border border-transparent rounded-md bg-wave-600 hover:bg-wave-500 focus:outline-none focus:border-wave-700 focus:shadow-outline-wave active:bg-wave-700 button" for="upload-button"><i class="fa-solid fa-upload"></i>Browse files
        </label>
  <div id="sub2"><span class="support">Supports: JPEG, JPG</span></div>
  </div>

  </div>

    </div>
  </body>

https://jsfiddle.net/z7fd4erq/ https://jsfiddle.net/z7fd4erq/


None

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Javascript - 检查“dragenter”上的文件类型 的相关文章

随机推荐

  • 在 Eclipse 中调试时查看完整字符串

    在调试 Java 代码时 视图 变量 和 表达式 中的字符串仅显示到一定长度 之后 Eclipse 将显示 有什么方法可以检查整个字符串吗 这减轻了在各处添加日志语句进行调试的痛苦 在 变量 视图中 您可以右键单击 详细信息 窗格 显示字符

  • Firefox：从网页强制全屏模式

    我正在开发一个基于网络的数据库 需要通过firefox网络浏览器打开 因为一些css3元素 我希望页面以全屏模式自动打开 我不希望数据库的用户有权访问 Firefox 菜单项 无法完成如果您只是控制网页 网页中的控件不会导致浏览器实例本身发

  • TextEditingController 被废弃后被使用

    我创建了一个容器输入的表单 我循环遍历输入列表来创建表单 我的变量是 List fields label Strings firstName controller fnameController validator val gt Valid

  • 如何使用 Neo4jTemplate 进行合并而不是创建

    我当前正在迭代一个数组 其中每个索引包含两个节点和一个关系 Part 1 gt Part 2 并且我使用 Neo4jTemplate save 方法将其保存到数据库中 但是 某些索引具有与其他节点有关系的重复节点 Part 2 gt Par

  • 如何通过设备树配置 uio_dmem_genirq 驱动程序

    The uio dmem genirq https git kernel org pub scm linux kernel git stable linux stable git tree drivers uio uio dmem geni

  • 如何强制 IntelliJ 使用不同的主文件夹

    我有一台有两个硬盘的电脑 在第一个 SSD 磁盘中 我有 Windows 分区 C 在第二个磁盘 D raid 卷 中 我安装了所有程序 我还将我的用户文件夹 桌面 文档 下载 图片和视频 移动到D Users David 安装 Intel

  • 如何在 R 中使用相同的循环向量引用多个数据库？

    我需要通过组合 聚合和拆分数据帧来执行各种操作 这些行动需要连续几年重复 2000 年 2001 年 2002 年等 但是 我找不到一种方法来基于带有年份的循环字符串来引用多个数据框 一个例子 我想合并同一年的 3 个数据框 我当前的代码

  • PHP：如果在多维数组中发现重复项，则合并相邻值

    我有一些 PHP 变量集 我正在从中创建一个多维数组 现在 在该数组中 我想检查特定的键 font 对于重复项 如果发现重复项 则对应的相应值 lang and weight 应该合并 这是我到目前为止所尝试的 这会取消设置 删除数组中的重

  • 在 WPF 中创建一个简单的表？

    我想知道是否有一种方法 任何组件 控件 允许我在应用程序窗口中绘制一个简单的 Microsoft Word 样式表格 像这样的事情 有任何想法吗 这取决于您想如何使用它 要么使用其中之一ItemsControl like DataGrid

  • TDD 的 JavaScript 单元测试工具

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我研究并考虑了许多 JavaScript 单元测试和测试工具 但一直无法找到合适的选项来

  • 多表继承模型和相同两个模型之间的简单一对一关系有什么区别？

    这些实现之间有什么区别 Django 有何不同 除了继承 Metaordering and get latest by属性 1 models py from django db import models class Place model

  • 入口类的入口控制器名称

    我正在设置入口控制器 入口类和入口以在集群外部公开服务 这是全新的集群设置 我已经使用设置了 nginx ingress 控制器 kubectl apply f https raw githubusercontent com kuberne

  • Java：一个类可以同时继承两个超类吗？

    我有一个班级旅程 我想将其制作为超级班级和另一个班级计划的旅程 plannedjourney 类扩展了 JFrame 因为它包含表单 但是我也希望这个类扩展 Journey 有没有可能的方法来做到这一点 不要混合模型和视图 如果您将两个域明

  • 为什么Oracle要在这里添加隐藏列呢？

    我们最近将客户系统迁移到 Oracle 12c 和我们产品的最新版本 此过程包括运行许多迁移脚本 其中主要是添加或更改表 我们注意到 向表中添加一列同时提供默认值会创建一个额外的隐藏列SYS NC00002 您应该能够使用以下代码重现此内容

  • 如何为多种屏幕尺寸编写媒体查询？

    如果我想要 body font size 18 px 1900及以上 body font size 16 px 1024 和 1900 body font size 14 px 768 至 1023 body font size 12 px

  • 是否可以在Mongodb中获取切片的切片？

    我正在查询一个 mongo 集合 该集合有一个字段 该字段是数组的数组 我想找到一条记录 其中包含数组数组中一个深度值的投影 从概念上讲 这是 slice 的 slice 在 Mongo 有没有办法做到这一点 例如 我有一条记录 name

  • C++ 是否支持 ASCII？

    一位同事告诉我 C 不支持 ASCII The 源字符集C 程序的定义是实现定义的 那么我的同事在多大程度上是错误的呢 C 编译器在链接数字时需要识别 ASCII48价值 0 所以是的 它需要能够识别 ASCII 但它总是需要吗 想象一下你

  • Node.JS 中的 HTTP DELETE 动词

    在向 Node js 应用程序发出 DELETE 请求之前 是否需要设置任何配置 我会做GET POST or PUT要求 但是DELETE请求将不起作用 DELETE http localhost 8081 api 1 0 entry y

  • 选择具有特定子元素的元素？

    如果我想在这样的列表上做一个 CSS 选择器 ul li li li a a li li a a li li a a li ul 我想做一个li hover仅影响li包含一个 a tag 有没有办法在CSS中指定它 if li hover

  • Javascript - 检查“dragenter”上的文件类型

    我试图仅允许 jpg 文件 当您拖动 拖动时 如果至少有一个被拖动的文件不是 jpg 那么我想显示错误消息 否则只显示活动的放置区 我无法获得仅检查 jpg 文件的正确语法 即使文件时间是 jpg 我也会不断触发错误消息 无论我做错了什么

热门标签