html5实现拖拽文件上传

最新推荐文章于 2023-12-26 15:24:14 发布
最新推荐文章于 2023-12-26 15:24:14 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML5

html文件


[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<title>HTML5拖拽上传</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="description" content="" /> 
<meta name="keywords" content="" /> 
<style type="text/css"> 
 
#dropzone{ 
width:300px; 
height:300px; 
border:2px dashed gray; 
} 
 
#dropzone.over { 
border:2px dashed orange; 
} 
 
</style> 
</head> 
    <body> 
        <h1>拖拽上传</h1> 
        <div id="dropzone"></div> 
    </body> 
 
    <script type="text/javascript"> 
 
    // 负责ajax发送数据 
    function up(fd) { 
        var xhr = new XMLHttpRequest(); 
        xhr.open('POST','upfile.php',true); // 异步传输 
 
        // xhr.upload 这是html5新增的api,储存了上传过程中的信息 
        xhr.upload.onprogress = function (ev) { 
            var percent = 0; 
            if(ev.lengthComputable) { 
                percent = 100 * ev.loaded/ev.total; 
                //document.getElementById('progress').innerHTML = percent; 
                document.getElementById('bar').style.width = percent + '%'; 
            } 
        } 
 
        xhr.send(fd); 
    } 
 
 
var dz = document.getElementById('dropzone'); 
dz.ondragover = function (ev) { 
    this.className = 'over'; 
    return false; 
} 
 
dz.ondragleave = function (){ 
    this.className = ''; 
} 
 
dz.ondrop = function(ev) { 
    //console.log(ev.dataTransfer.files[0]); 
 
    var fd = new FormData(); 
    fd.append('pic',ev.dataTransfer.files[0]); 
 
    up(fd); 
 
    return false; // 拦截拖放的正常行为 
} 
 
</script> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>HTML5拖拽上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">

#dropzone{
width:300px;
height:300px;
border:2px dashed gray;
}

#dropzone.over {
border:2px dashed orange;
}

</style>
</head>
    <body>
        <h1>拖拽上传</h1>
        <div id="dropzone"></div>
    </body>

    <script type="text/javascript">

    // 负责ajax发送数据
    function up(fd) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST','upfile.php',true); // 异步传输

        // xhr.upload 这是html5新增的api,储存了上传过程中的信息
        xhr.upload.onprogress = function (ev) {
            var percent = 0;
            if(ev.lengthComputable) {
                percent = 100 * ev.loaded/ev.total;
                //document.getElementById('progress').innerHTML = percent;
                document.getElementById('bar').style.width = percent + '%';
            }
        }

        xhr.send(fd);
    }


var dz = document.getElementById('dropzone');
dz.ondragover = function (ev) {
    this.className = 'over';
    return false;
}

dz.ondragleave = function (){
    this.className = '';
}

dz.ondrop = function(ev) {
    //console.log(ev.dataTransfer.files[0]);

    var fd = new FormData();
    fd.append('pic',ev.dataTransfer.files[0]);

    up(fd);

    return false; // 拦截拖放的正常行为
}

</script>
</html>
upfile.php


[php]
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail'; 

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';
如图：

 \
 

 

鎏金岁月-Ban
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 拖拽批量上传文件的示例代码
09-28
总之，实现HTML5拖拽批量上传文件夹的功能涉及了HTML5的拖放API、文件系统接口、Vue.js组件开发以及跨域策略等多个技术点。通过细致的设计和编程，我们可以创建出高效、友好的文件上传体验。在实际开发中，还需要...
HTML5原生拖拽/拖放 Drag & Drop 详解
delishcomcn的博客
08-21 1985
拖放（drap & drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。
HTML5的拖放和文件操作
2301_78547243的博客
11-02 348
因为它是事件对象的属性，所有只能在拖放事件的事件处理程序中访问dataTransfer对象。(4)如果effectAllowed属性设定为具体效果（不为none和all）,dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素放到目标元素中。FileList对象是一个类似于数组的对象，代表一组选中的文件，每个成员都是一个File实例。它主要出现在两个场合中。File对象没有自己的实例方法，由于继承了Blob对象，因此可以使用Blob对象的实例方法slice()
HTML5应用之文件拖拽上传
最新发布
weixin_45525177的博客
12-26 178
参考文章：http://blog.ncmem.com/wordpress/2023/12/26/html5%e5%ba%94%e7%94%a8%e4%b9%8b%e6%96%87%e4%bb%b6%e6%8b%96%e6%8b%bd%e4%b8%8a%e4%bc%a0/如需拖拽页面里的元素，需要给其添加属性draggable=”true”；在本例中，我们用javascript来侦听drop事件，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。
Html5 新特性——拖放、文件上传
io_123io_123的博客
02-17 3113
HTML5——拖放
前端实现文件上传（点击+拖拽）
weixin_45092437的博客
12-25 1万+
通过原生的html+js来实现文件的点击上传和拖拽上传。 首先是点击上传文件，只需要借助`input`标签即可，但为了美观，所以过一个div，模拟成上传按钮，然后监听点击事件，通过`元素.click()`去模拟点击真正的上传元素。 然后是拖拽获取上传文件，通过HTML5新增的`drag`API+`dataTransfer`来实现文件的拖拽获取，但在某些低版本IE浏览器不兼容。 最后当我们获取到上传文件之后，我们就可以借助`formDate`对象以及ajax工具（原生、axios等）进行上传了。
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
01-21
先上代码，写的jsp页面，后台是tomcat服务器，所以页面里有一些java的代码...DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head>
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
10-21
主要介绍了NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
HTML5 js实现拖拉上传文件功能
01-19
在HTML5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart – 用户开始拖动元素时触发 ondrag – 元素正在拖动时触发 ondragend – 用户...
MVC中基于Ajax和HTML5实现文件上传功能
12-10
本篇文章主要探讨如何不依赖Flash或其他插件，仅通过Ajax和HTML5的File API实现带有进度条的文件上传功能，甚至支持拖拽操作的多文件上传。 首先，HTML5的File API提供了访问本地文件的能力，包括File接口和...
HTML5文件上传美化表单 支持拖拽上传
08-23
文件上传在网页中应用十分广泛，对于一般的文件上传控件，基本都是浏览器自带的外观，而且也没有文件信息的展示，比如文件大小、文件类型等，也没有对文件进行预览，特别是图片。今天要介绍的这款插件不仅让文件上传表单更为美观，而且可以预览图片，以及删除待上传的文件等功能，堪比一个小型的文件管理器。
html实现拖拽上传
LueLueLue77的博客
10-06 1335
最近公司需要有一个拖拽上传的功能，但是由于在开发前，某某人规定了只能使用某个组件库😅，而组件库内没有拖拽上传的例子，所以我在这里写一个拖拽上传的功能😁.3. 这里有用到Bootstrap5的class，所以html部分的样式需要自己更改。1. 这里上传成功后的提示用的是primevue组件库，可以不用管。2. 目前这里只是单文件上传，如果有需求可以自行更改。4. 目前这边就是按钮上传以及拖拽上传。
HTML5实现拖放
上庸者-不服周
09-30 3732
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
HTML5文件操作+上传+文件拖拽（案例）
TongJ_的博客
07-28 1882
readAsDataURL(file)获取一个对象路径,读取对象,readAsText(文件,"utf-8")以某种字符编码读取。onloadend读取文件完成时触发(无论成功与否)onloadstart读取文件开始时触发。onprogress读取文件过程中触发。onload读取文件成功完成时触发。fileList读取多个文件对象。fileReader读取文件信息。onabort读取文件中断时触发。reslut获取读取对象的信息。file读取单个文件对象。abort()中断读取。...
html中拖放文件,HTML 5 文件拖放基础讲解
weixin_33321740的博客
06-26 202
拖放(Drag 和 drop)是 HTML5 标准的组成部分。拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。HTML5 拖放实例下面的例子是一个简单...
HTML5文件实现拖拽上传
讲不出再见
01-05 958
通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。      相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。           让我们看一下Firefox
html5+js拖拽上传的那些事
热门推荐
CODING
08-26 1万+
最近搞了个拖拽上传的项目，以为挺简单，做了之后发现里面涉及的东西还是非常多的。这里随性的谈谈其中有意思的地方吧。
HTML5之拖放功能(多文件上传和元素拖放)
~~~~~~~~~~~~
05-10 4958
在Web应用中，良好的用户体验是设计师们一直的追求，拖拽体验就是其中之一。在HTML5之前，已经可以使用事件mousedown、mousemove和mouseup巧妙地实现了页面内的拖放操作，但是拖放的操作范围还只是局限在浏览器内部。HTML5提供的拖放API，不但能直接实现拖放操作，而且拖放的范围已经超出浏览器的边界；HTML5提供的文件API，支持拖拽多个文件并上传。 允许元素是否可以拖放很
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、付费专栏及课程。

余额充值