程序员经验分享-hwhale

使用 HTML5 文件输入时单击按钮从多个文件上传器中删除文件

2024-01-31

如何添加remove这里的按钮就像简单地在文件队列中一一删除一样

我之所以不使用带有 OOB 插件的免费文件上传插件，是因为我的客户要求是出于安全目的，他们需要简单的上传 ui，而不需要任何复杂的插件。

$(function() {
  var dropZoneId = "drop-zone";
  var buttonId = "clickHere";
  var mouseOverClass = "mouse-over";

  var dropZone = $("#" + dropZoneId);
  var ooleft = dropZone.offset().left;
  var ooright = dropZone.outerWidth() + ooleft;
  var ootop = dropZone.offset().top;
  var oobottom = dropZone.outerHeight() + ootop;
  var inputFile = dropZone.find("input");
  document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    dropZone.addClass(mouseOverClass);
    var x = e.pageX;
    var y = e.pageY;

    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
      inputFile.offset({
        top: y - 15,
        left: x - 100
      });
    } else {
      inputFile.offset({
        top: -400,
        left: -400
      });
    }

  }, true);

  if (buttonId != "") {
    var clickZone = $("#" + buttonId);

    var oleft = clickZone.offset().left;
    var oright = clickZone.outerWidth() + oleft;
    var otop = clickZone.offset().top;
    var obottom = clickZone.outerHeight() + otop;

    $("#" + buttonId).mousemove(function(e) {
      var x = e.pageX;
      var y = e.pageY;
      if (!(x < oleft || x > oright || y < otop || y > obottom)) {
        inputFile.offset({
          top: y - 15,
          left: x - 160
        });
      } else {
        inputFile.offset({
          top: -400,
          left: -400
        });
      }
    });
  }

  document.getElementById(dropZoneId).addEventListener("drop", function(e) {
    $("#" + dropZoneId).removeClass(mouseOverClass);
  }, true);

  inputFile.on('change', function(e) {
    $('#filename').html("");
    var fileNum = this.files.length,
      initial = 0,
      counter = 0;
    for (initial; initial < fileNum; initial++) {
      counter = counter + 1;
      $('#filename').append('<span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + '&nbsp;&nbsp;<span class="fa fa-times-circle fa-lg closeBtn" title="remove"></span><br>');
    }
  });

})
#drop-zone {
  width: 100%;
  min-height: 150px;
  border: 3px dashed rgba(0, 0, 0, .3);
  border-radius: 5px;
  font-family: Arial;
  text-align: center;
  position: relative;
  font-size: 20px;
  color: #7E7E7E;
}
#drop-zone input {
  position: absolute;
  cursor: pointer;
  left: 0px;
  top: 0px;
  opacity: 0;
}
/*Important*/

#drop-zone.mouse-over {
  border: 3px dashed rgba(0, 0, 0, .3);
  color: #7E7E7E;
}
/*If you dont want the button*/

#clickHere {
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 17px;
  width: 150px;
  border-radius: 4px;
  background-color: #4679BD;
  padding: 10px;
}
#clickHere:hover {
  background-color: #376199;
}
#filename {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5em;
}
.file-preview {
  background: #ccc;
  border: 5px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
}
.closeBtn:hover {
  color: red;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
  <p>Drop files here...</p>
  <div id="clickHere">or click here.. <i class="fa fa-upload"></i>
    <input type="file" name="file" id="file" multiple />
  </div>
  <div id='filename'></div>
</div>

注意：我不拥有该代码，我已将其重新用作其他人的资源，并为我的客户进行了修改

**更新 在这里我的fiddle https://jsfiddle.net/cjohn/5vktkyv8/ link


HTML5 文件输入的文件列表是只读的，因此当您尝试从中删除文件时，您将不被允许。

您需要做的是维护一个单独的数组列表（示例中的 JSON 数组）。

我用一个 div 包裹了你的 X 按钮，该 div 保存连接到“file_”字符串的文件索引，并添加了一个onclick功能removeLine(obj)接受元素作为对象。

我还添加了一个 JSON 数组finalFiles在全球范围内也推动了inputFile到全球范围。

当文件输入更改时，我将通过以下方式使用所选文件设置 JSON 数组：

$.each(this.files,function(idx,elm){
           finalFiles[idx]=elm;
        });

功能removeLine如果用户错误地删除了文件，将刷新输入文件列表以允许再次选择相同的文件，该函数从包装器分区 id 中获取文件索引，删除包装器 div，然后从 JSON 数组中删除该文件。

function removeLine(obj)
    {
      inputFile.val('');
      var jqObj = $(obj);
      var container = jqObj.closest('div');
      var index = container.attr("id").split('_')[1];
      container.remove(); 

      delete finalFiles[index];
      //console.log(finalFiles);
    }

您可以在表单提交时维护您的文件，并使用 FormData 通过 AJAX post 发送它们，方式类似于本文 http://blog.teamtreehouse.com/uploading-files-ajax.

var dropZoneId = "drop-zone";
  var buttonId = "clickHere";
  var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
 var inputFile = dropZone.find("input");
 var finalFiles = {};
$(function() {
  

  
  var ooleft = dropZone.offset().left;
  var ooright = dropZone.outerWidth() + ooleft;
  var ootop = dropZone.offset().top;
  var oobottom = dropZone.outerHeight() + ootop;
 
  document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    dropZone.addClass(mouseOverClass);
    var x = e.pageX;
    var y = e.pageY;

    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
      inputFile.offset({
        top: y - 15,
        left: x - 100
      });
    } else {
      inputFile.offset({
        top: -400,
        left: -400
      });
    }

  }, true);

  if (buttonId != "") {
    var clickZone = $("#" + buttonId);

    var oleft = clickZone.offset().left;
    var oright = clickZone.outerWidth() + oleft;
    var otop = clickZone.offset().top;
    var obottom = clickZone.outerHeight() + otop;

    $("#" + buttonId).mousemove(function(e) {
      var x = e.pageX;
      var y = e.pageY;
      if (!(x < oleft || x > oright || y < otop || y > obottom)) {
        inputFile.offset({
          top: y - 15,
          left: x - 160
        });
      } else {
        inputFile.offset({
          top: -400,
          left: -400
        });
      }
    });
  }

  document.getElementById(dropZoneId).addEventListener("drop", function(e) {
    $("#" + dropZoneId).removeClass(mouseOverClass);
  }, true);


  inputFile.on('change', function(e) {
    finalFiles = {};
    $('#filename').html("");
    var fileNum = this.files.length,
      initial = 0,
      counter = 0;

    $.each(this.files,function(idx,elm){
       finalFiles[idx]=elm;
    });

    for (initial; initial < fileNum; initial++) {
      counter = counter + 1;
      $('#filename').append('<div id="file_'+ initial +'"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + '&nbsp;&nbsp;<span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
    }
  });



})

function removeLine(obj)
{
  inputFile.val('');
  var jqObj = $(obj);
  var container = jqObj.closest('div');
  var index = container.attr("id").split('_')[1];
  container.remove(); 

  delete finalFiles[index];
  //console.log(finalFiles);
}
#drop-zone {
  width: 100%;
  min-height: 150px;
  border: 3px dashed rgba(0, 0, 0, .3);
  border-radius: 5px;
  font-family: Arial;
  text-align: center;
  position: relative;
  font-size: 20px;
  color: #7E7E7E;
}
#drop-zone input {
  position: absolute;
  cursor: pointer;
  left: 0px;
  top: 0px;
  opacity: 0;
}
/*Important*/

#drop-zone.mouse-over {
  border: 3px dashed rgba(0, 0, 0, .3);
  color: #7E7E7E;
}
/*If you dont want the button*/

#clickHere {
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 17px;
  width: 150px;
  border-radius: 4px;
  background-color: #4679BD;
  padding: 10px;
}
#clickHere:hover {
  background-color: #376199;
}
#filename {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5em;
}
.file-preview {
  background: #ccc;
  border: 5px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
}
.closeBtn:hover {
  color: red;
  display:inline-block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
  <p>Drop files here...</p>
  <div id="clickHere">or click here.. <i class="fa fa-upload"></i>
    <input type="file" name="file" id="file" multiple />
  </div>
  <div id='filename'></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

html

multifileuploader

使用 HTML5 文件输入时单击按钮从多个文件上传器中删除文件 的相关文章

随机推荐

  • 错误 ITMS-90096：您的二进制文件未针对 iPhone 5 进行优化

    我收到此错误 查看 LaunchImage launchimage 文件夹 我有一个 email protected cdn cgi l email protection但不是Default 568h png image 似乎没有空间容纳一

  • DELETE 语句冲突 REFERENCE 约束

    我收到错误 DELETE 语句与 REFERENCE 约束冲突 FK DocYDocument1 表 DocYDocument 列 SubDocID 语句 从文档中删除 ID 参数 D7FAA3CF 表 DocYDocument 有列 PK

  • project.json 中的框架和导入部分：它们是什么？

    到底是什么frameworks and imports的部分project jsonASP NET Core 1 0 项目的文件以及它们的作用是什么 我一直在尝试寻找 官方 文档以更好地理解它 下面是我最近启动的一个 Yeoman 支架 A

  • 在java servlet中处理“多部分/相关”

    在 Jetty 8 下运行的 Servlet 接收以下请求 Header Content Type multipart related boundary example Data example content type text xml

  • Java中如何获取for循环的最后一个值？

    import java util Scanner public class Problem1 public static void main String args input Scanner kb new Scanner System i

  • 访问网站时如何检查自己的会话哈希？

    我有兴趣了解当我访问网站时人们在我的会话和 cookie 中存储了什么 有什么方法可以查看请求之间以及我在 Safari Chrome 或 Firefox 中的页面上时发生的情况吗 在 Firefox 中 您可以使用其他Firebug ht

  • Google Sheets 脚本：按名称引用图表

    我试图在 图表 工作表中创建一个 用户界面 这将允许他们从下拉列表中选择一个图表 然后它将显示在该下拉列表的正下方 最终会有大量图表 可能在另一个 图表数据 表上 所以我的想法是将图表从数据表移动到图表表 来回移动 不确定这是否可以做到 我

  • 有条件调用构造函数[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 假设某个类foo有两个自定义构造函数 例如foo foo bar const and foo foo baz const 根据某些条件调用其中任

  • 我可以从空 std 容器的 front() 得到什么？

    If front 返回一个引用 并且容器是空的 我会得到什么 未定义的引用 这是否意味着我需要检查empty 在每个之前front 你会得到未定义的行为 在调用 front 之前 你需要使用 empty 检查容器是否为空 检查容器是否包含某

  • 下载已上传的 Lambda 函数

    我使用 upload zip 在 AWS Python 中创建了一个 lambda 函数 我丢失了这些文件 需要进行一些更改 有什么方法可以下载该 zip 吗 Yes 导航到您的 lambda 函数设置 在右上角您将有一个名为 的按钮 Ac

  • 与模板类交朋友：编译错误

    我试图使用指向实现惯用语的指针来隐藏我正在使用 Concurrency unbounded buffer 来自 VC 2010 的事实 问题是 我正在使用模板执行此操作 但陷入了编译错误 这是代码 阻塞队列 h pragma once na

  • 如何在 php 中制作访客计数器？ [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我如何计算

  • 如何多次使用ConsoleCancelEventHandler

    我一直忙于编写一个充当前端的应用程序 它有一个 GUI 可以使用按钮和类似的东西来获取命令行选项 并将它们传递给命令行 exe 它使用应用程序的控制台来显示命令行应用程序的输出 这工作正常 但是当使用 Ctrl C 或尝试关闭控制台窗口时

  • 安装 Realm 后出错：必须首先使用有效主机创建 RPC 会话

    我最近使用以下方式安装了领域 npm i realm S react native link realm 重要编辑仅当从设备调试时才会出现此问题 一切仍然有效 但这一次 当我尝试启用Debug Js Remotely从开发菜单中 我收到错误

  • 在 Ruby 中构建长字符串的简洁方法

    在编写 Ruby 客户端脚本 时 我看到了三种构建更长字符串的方法 包括行结束符 所有这些对我来说 闻起来 都有点难看 有没有更干净 更好的方法 变量递增 if render quote quote Now that there is th

  • 项目生成的nuget包依赖于另一个不创建nuget包的项目

    如果我有一个构建 nuget 包的项目 P1 并且让它依赖于一个不构建 nuget 包的项目 P2 则生成的包仍将引用 P2作为 nuget 包 重现步骤 使用 2 个 C 项目 P1 和 P2 创建解决方案 使P1依赖于P2 将以下行添加

  • 使用 JMH 计算指标

    如何计算 JMH 中的 CPU 时间和内存量 例如 我有 代码 State Scope Thread BenchmarkMode Mode All public class JMHSample My int x 1 int y 2 Gene

  • Spring MVC Controller中JsonView的动态选择

    我知道可以用注释控制器方法 JsonView 在 Spring MVC 中静态定义单个视图类 不幸的是 这意味着我可能拥有的每种类型的视图都需要不同的端点 我看到其他人也问过这个问题before https stackoverflow co

  • 为什么在将 Marshmallow 与 SQLAlchemy 自动映射一起使用时出现“Decimal 类型的对象不可 JSON 序列化”？

    Using automap base from sqlalchemy ext automap映射我的桌子 不能够shema dumps result getting raise TypeError f Object of type o cl

  • 使用 HTML5 文件输入时单击按钮从多个文件上传器中删除文件

    如何添加remove这里的按钮就像简单地在文件队列中一一删除一样 我之所以不使用带有 OOB 插件的免费文件上传插件 是因为我的客户要求是出于安全目的 他们需要简单的上传 ui 而不需要任何复杂的插件 function var dropZo

热门标签