js 拖拽上传文件

最新推荐文章于 2024-06-04 17:34:12 发布
最新推荐文章于 2024-06-04 17:34:12 发布
阅读量423 收藏
点赞数
分类专栏： 前端 javascript 文章标签： js 拖拽选择文件
原文链接：https://www.php.cn/js-tutorial-413483.html
版权

主要依靠的 web dom 事件是： dragover 和 drop

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

  <script type="text/javascript">

    function handleFileSelect(evt) {

      evt.stopPropagation();

      evt.preventDefault();      

var files = evt.dataTransfer.files; 

      var output = [];      

for (var i = 0; i < files.length; i++) {

        document.getElementById('output').innerHTML += files[i].name + '(' + files[i].size + ') '

          + files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() +  ' - ' + files[i].type + '<br/>';

      }

    }    

function handleDragOver(evt) {

      evt.stopPropagation();

      evt.preventDefault();

      evt.dataTransfer.dropEffect = 'copy';

    }    

    function PageLoad(evt) {      

var dropFrame = document.getElementById('DropFrame');

      dropFrame.addEventListener('dragover', handleDragOver, false);

      dropFrame.addEventListener('drop', handleFileSelect, false);

    }  

</script>

</head>

<body onload="PageLoad();">

  <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">把文件放在这里。</div>

  <div id="output"></div>

</body>

</html>

 

 

 

Z_ One Dream
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js-点击或拖拽上传文件
liuhao9999的博客
03-14 793
<div class="cameraInputCon"> <input type="file" id="cameraInput" /> <span>点击或拖拽上传文件</span> </div> <style> .cameraInputCon{ width:200px; height:100px; text-align: center; line-height: 100px...
Js+php实现异步拖拽上传文件
10-24
异步拖拽上传文件是一种现代Web开发中的常见功能，它允许用户通过拖放操作将本地文件上传到服务器，而无需点击“浏览”按钮选择文件。这个功能极大地提升了用户体验，尤其在处理大量或大文件上传时更为便捷。在本文...
ajax文件上传（拖拽）
jiax_gg的博客
05-21 813
本地上传，提前预览（图片，视频）1.html中div标签预览显示，button标签触发上传事件。[html] view plain copy&lt;div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px"&gt;将图片拖拽到此&lt;/div&gt;  &lt;button onclick="xhr...
Javascript实现拖拽选择图片，并预览
最新发布
gumini的博客
06-04 489
文件上传方式：点击上传、拖拽上传，这里我们只考虑拖拽上传的原理。实现拖拽，就需要用到拖拽相关的事件（DragEvent），如：// 可拖拽元素相关事件dragstart：当用户开始拖拽元素或选择文本时触发；drag：当用户拖动元素或选择的文本时触发，每几百毫秒就会触发一次；dragend：当拖动操作结束（释放鼠标按钮或单击 escape 键）时触发；// 可拖拽元素的放置区域相关事件dragenter：当可拖拽的元素或选择的文本进入有效的放置区域时触发；dragleave。
js拖拽文件上传
仙掌人叔叔
03-17 2970
刚做完这个功能，把关键代码拿出来分享一下，如有毛病，各位指正。     //进入     jsDrag.addEventListener( "dragenter", function (e) {         e.preventDefault();         dragTip.text( "drop it" );     }, false);
js拖动上传
u014708123的博客
03-21 403
在现代的Web开发中，拖动上传是一项非常常见且实用的功能。本文将向你介绍如何使用JavaScript实现拖动上传，并深入解析相关的API、代码调用方法以及注意事项。希望通过本文的科普，能帮助你更好地理解和应用这一功能。通过上述的代码调用方法和注意事项，你可以轻松地实现拖动上传功能，并根据需要进行自定义扩展。希望本文对你有所帮助！
JS实现文件上传(拖拽上传/选择文件上传)
qq_41429765的博客
06-16 2567
拖拽上传: <style> .wrap{ background: #e5e5e5; width:500px; height:100px; margin: 0 auto; text-align: center; line-height:100px; color: #fff; } #box{ height:500px; borde
JS实现的文件拖拽上传功能示例
10-18
在网页开发中，文件拖拽上传是一种常见的用户交互功能，它提供了便捷的文件上传方式。本示例主要讲解了如何使用JavaScript实现这一功能，涉及到的核心技术包括事件处理、DOM操作以及FileReader API。 首先，我们...
Dropzone.js实现文件拖拽上传实例
03-31
dropzone.js是一个开源的JavaScript库，提供 AJAX 异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。 使用Dropzone 我们可以建立一个正式的上传form表单，...
jq+layui 实现图片拖拽上传功能
02-28
请注意，这只是一个基础的拖拽上传实现，实际应用中可能还需要处理上传到服务器、进度显示、多文件上传等更复杂的需求。在实际开发中，你可能需要结合后端接口，使用Ajax或Fetch API将图片数据发送到服务器进行存储...
JavaScript 实现拖拽文件进行ajax上传
逍遥君の书库
08-09 679
预防以后需要，自己手写了一个拖拽文件上传，话不多，效果图 html 部分： &lt;div id="div" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)" style="width: 400px;height: 300px;border: 1px solid black...
拖拽上传文件
03-07
目前采用拖拽上传得网站有：Gmail，网易邮箱，酷盘，还有一些国外的网站，用户只要拖拽文件到指定区域就可以轻松实现文件的上传，技术难度为0，用户体验良好！
js图片拖动上传
07-11
js图片，拖动上传
html5js拖拽和点击上传
08-10
file文件上传的两种方式，点击按钮上传与拖放文件上传
js获取拖拽目录文件
06-06
根据拖拽事件中获取文件列表，可用于实现文件上传，下载地址：dw.gofreeteam.com/DocSystem/web/project.html?vid=4&doc=2834
js文件拖拽上传
yangguangxiadewo的专栏
11-13 144
input文件拖拽上传和解析
Windows界面编程第七篇 文件拖拽(文件拖放)
MoreWindows Blog
03-11 1万+
本文配套程序下载地址为：http://download.csdn.net/detail/morewindows/5128654转载请标明出处，原文地址：http://blog.csdn.net/morewindows/article/details/8634451欢迎关注微博：http://weibo.com/MoreWindows 前面已经有六篇文章介绍了Windows界面编程，目录如下：1.
JS 拖拽上传文件
汤一飞
09-27 687
文章目录参考 参考 DataTransfer 拖拽献祭中的黑山羊-DataTransfer对象 监控 drop 事件, 从 event.dataTransfer.files (或 event.dataTransfer.items) 中取文件 注意: 兼容性问题 拖拽网页文件上传时, 要注意是否正确取到了文件 ...
js实现文件上传、文件预览、拖拽上传的方法
热门推荐
yun_master的博客
03-29 1万+
一、文件上传 1、上传的html 我们可以使用input实现文件上传 <input type="file" id="upload"> 2、访问上传的文件 通过dom访问 const input = document.querySelector("#upload"); const files = input.files; 通过onchange事件访问 const input = document.querySelector("#upload"); input.addEventListener(
js拖拽上传文件生成代码
05-30
下面是一个简单的示例代码，实现了拖拽上传文件并生成对应的上传代码： ```html <!DOCTYPE html> <html> <head> <title>拖拽上传文件生成代码</title> <script> function handleDrop(e) { e.preventDefault(); var files = e.dataTransfer.files; if (files.length > 0) { var file = files[0]; var reader = new FileReader(); reader.onload = function(e) { var content = e.target.result; var code = "const file = new File([\n" + JSON.stringify(content) + "\n], \"" + file.name + "\", {type: \"" + file.type + "\"});\n" + "const formData = new FormData();\n" + "formData.append(\"file\", file);\n" + "fetch(\"/upload\", {\n" + " method: \"POST\",\n" + " body: formData\n" + "});\n"; document.getElementById("code").value = code; } reader.readAsText(file); } } function handleDragOver(e) { e.preventDefault(); } </script> </head> <body> <div style="border: 1px dashed black; padding: 20px;" ondrop="handleDrop(event)" ondragover="handleDragOver(event)"> 拖拽文件到这里上传：<br> <input type="text" id="code" size="50"> </div> </body> </html> ``` 这个示例代码中，我们使用了HTML5的拖拽API来实现拖拽上传文件的功能。当用户拖拽文件到指定区域时，我们会读取文件内容，并生成对应的上传代码，并将代码显示在页面上的input文本框中。在这个示例中，我们生成了一个包含上传文件的FormData对象，并使用fetch方法将其上传到服务器的/upload接口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值