html5简单实现拖拽上传文件（直接上代码）

最新推荐文章于 2024-05-11 12:32:07 发布
最新推荐文章于 2024-05-11 12:32:07 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端h5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongweixin2018/article/details/123037561
版权
本文通过HTML5的拖放API展示了如何实现一个简单的拖拽上传.xlsx文件的功能。当用户将文件拖入指定区域时，代码会检查文件类型是否为.xlsx，如果不是则给出错误提示并刷新页面。如果是.xlsx文件，文件会被上传到服务器，并在上传成功后自动刷新页面。
摘要由CSDN通过智能技术生成 
<div >

    <div class="card-box">

        <div class="card" id="dropBox" >  

            <div >

                <p><i class="layui-icon layui-icon-upload"></i></p>

                 <p class="font-color">支持拓展名：xlsx</p>

            </div>

        </div>

    </div>

</div>





<script>

    let dropBox = document.getElementById("dropBox")

    //监听文件拖拽移入

    dropBox.addEventListener('dragover', FileDragHover, false)

    //监听文件拖拽移出

    //dropBox.addEventListener('dragleave', FileDragLeave, false)

    //监听文件拖拽放下

    dropBox.addEventListener('drop',
最低0.47元/天 解锁文章
gongweixin2018
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面实现拖拽上传完整实例源码.zip
11-28
支持拖拽上传的完整实例源码，
html/javascript实现简单的上传
JSON_J的博客
11-07 8754
简单的原生上传实现
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）
最新发布
2401_84092143的博客
05-11 869
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
简单html文件上传带参数
weixin_44812604的博客
12-08 2103
简单html文件上传带参数
用html实现本地文件的上传
weixin_45525177的博客
12-15 1511
参考文章：http://blog.ncmem.com/wordpress/2023/12/15/%e7%94%a8html%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0/当用户选择了一个文件并点击了提交按钮，会使用AJAX方式将文件上传到指定的后台接口（这里的接口地址是http://localhost:8080/upload，你需要根据自己的需求修改）。
html 5原生的文件上传,纯 HTML5 实现的文件上传
weixin_31876475的博客
06-02 272
html 部分保存javascript部分// 选择图片预览$("#container").on("change","#image_file",function(){var oFile = document.getElementById('image_file').files[0];var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/...
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
01-21
先上代码，写的jsp页面，后台是tomcat服务器，所以页面里有一些java的代码，如果后台用其他语言可以无视： 复制代码代码如下: <%@ page language=”java” contentType=”text/html; charset=UTF-8″ ...
HTML5 拖拽批量上传文件的示例代码
09-28
HTML5的拖拽批量上传文件功能是现代网页应用中一项重要的交互设计，它极大地提升了用户在上传大量文件时的体验。在本文中，我们将深入探讨如何实现这一特性，特别是使用HTML5、Vue.js和elementUI框架的情况下。 ...
HTML5拖拽上传图片预览提交代码
06-24
通过分析和学习这些代码，开发者可以更直观地了解HTML5拖拽上传图片预览提交的实现过程。 总的来说，HTML5的拖放和File API为网页应用带来了更多可能性，使得用户可以更加直观、便捷地进行文件交互。拖拽上传图片...
html文件上传前端模板，开箱即用
weixin_52634104的博客
07-03 1424
模态框出现的时候发请求查询数据库中的字段并渲染到页面上，点击上传文件出现选择页面，监听input的change事件，触发后调用文件上传接口上传文件到后端，同时前端ui li 绑定的fileList数组新增元素，点击保存按钮调接口存储数据到数据库中。vue实例之外的部分：这个方法不写到methods里面的原因是使用了bootstrap-table插件，有些不兼容的地方，索性就写到外面。js部分：由于django框架的原因，{{}}的模板语法会和django自带的产生冲突，故改成[[]]。
PHP 实现网页文件上传 及 文件展示
睡醒继续做梦的博客
09-19 1578
PHP 实现网页文件上传 及 文件展示
H5 拖拽上传本地文件（原生实现）
weixin_44646763的博客
06-11 955
H5 拖拽上传本地文件（原生实现），同时支持点击上传
【项目问题】HTML5（范围选择以及文件上传的进度显示）
Dai的博客
12-06 859
一、范围选择显示 在我们使用<input type="range"/>元素进度条的时候，无法直观地得知选中的范围数据，这就造成了较差的用户体验，所以我们需要将数据进行显示。 效果如下图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co...
h5页面上传文件及图片（vue）
Youxingfang的博客
10-18 2940
h5页面上传文件及图片 1、vant的uploader组件： 代码如下（示例）： <van-uploader accept="application/pdf,application/xlsx,application/doc,application/docx,image/*" v-model="fileList" :max-size="2000 * 1024" @oversize="onOversize" :max-count="5" :after-read="afterRead"
使用HTML5实现多文件上传
jinghuainfo
09-22 715
在Dojo1.6中有一个崭新的Multi-File Uploader (dojox.form.Uploader)，它具有一个可定制样式的file input按钮，可使用多文件选择模式，且完全基于HTML元素。在不支持HTML5的浏览器中，该控件可以自动切换到使用Flash或者iframe。 原文：The New HTML5 Multi-File Uploader 作者：Mike Wilcox ...
html5实现多文件的上传
跟我一起去征服
02-08 1456
html5实现多文件的上传 主要用到的是的multiple属性 下面是页面的详细代码： Solution 4-5: Sending multiple files              action="http://10.10.25.31:8080/myupload/UploadPhotoServlet"  ENCTYPE="
文件上传、多文件上传、文件上传进度监听，附源码包
qq_33427869的博客
12-19 766
前段时间做了个类似云盘文件上传的功能，要支持多文件上传及上传进度监听。 现在将主体功能分享给大家！ 话不多说，直接上代码！ 1、前段页面布局 <body> <h1>多文件上传，兼容IE8及以下版本，支持上传进度监听</h1> <div class="body-content sub-body-content buy-cart...
写一个简单的文件上传html
weixin_42612405的博客
02-11 262
以下是一个简单的文件上传HTML代码： <html> <head> <title>文件上传</title> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> ...
html实现拖拽上传
LueLueLue77的博客
10-06 1332
最近公司需要有一个拖拽上传的功能，但是由于在开发前，某某人规定了只能使用某个组件库😅，而组件库内没有拖拽上传的例子，所以我在这里写一个拖拽上传的功能😁.3. 这里有用到Bootstrap5的class，所以html部分的样式需要自己更改。1. 这里上传成功后的提示用的是primevue组件库，可以不用管。2. 目前这里只是单文件上传，如果有需求可以自行更改。4. 目前这边就是按钮上传以及拖拽上传。
html批量上传php,HTML5实现拖拽批量上传文件的代码
06-07
HTML5实现拖拽批量上传文件的代码如下： ```html <!DOCTYPE html> <html> <head> <title>Drag and Drop File Upload</title> <style> #drop_area { width: 200px; height: 200px; border: 2px dashed gray; text-align: center; font-size: 20px; margin: 20px auto; padding: 10px; } </style> </head> <body> <div id="drop_area"> Drag and Drop Files Here </div> <script> var dropArea = document.getElementById('drop_area'); // Prevent default drag behaviors ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); document.body.addEventListener(eventName, preventDefaults, false); }); // Highlight drop area when dragging files over it ['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false); }); // Remove highlight when dragging files out of drop area ['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false); }); // Handle dropped files dropArea.addEventListener('drop', handleDrop, false); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } function highlight() { dropArea.classList.add('highlight'); } function unhighlight() { dropArea.classList.remove('highlight'); } function handleDrop(e) { var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } function handleFiles(files) { files = [...files]; files.forEach(uploadFile); } function uploadFile(file) { var url = 'upload.php'; var formData = new FormData(); formData.append('file', file); fetch(url, { method: 'POST', body: formData }) .then(response => { console.log(response.text()); }) .catch(error => { console.error(error); }); } </script> </body> </html> ``` 其中，`upload.php` 是接收文件并处理的 PHP 文件。下面是一个简单的上传 PHP 文件的示例： ```php <?php if ($_FILES['file']['error'] === UPLOAD_ERR_OK) { $uploadPath = './uploads/' . basename($_FILES['file']['name']); move_uploaded_file($_FILES['file']['tmp_name'], $uploadPath); echo 'File uploaded successfully!'; } else { echo 'Error uploading file.'; } ?> ``` 上述代码将上传的文件保存到 `uploads` 文件夹中，并返回上传成功或失败的消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值