利用HTML5的File API可以实现文件拖拽到服务器上
直接看例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
#drop_zone{
width: 500px; height:300px; background-color: yellow;
}
</style>
</head>
<body>
<div id="drop_zone">将文件拖拽到这里</div>
<div id="output_area"></div>
<script>
var output = document.getElementById('output_area');
var dropZone = document.getElementById('drop_zone');
if (!(('draggable' in dropZone) && ('ondragenter' in dropZone)
&& ('ondragleave' in dropZone) && ('ondragover' in dropZone)
&& window.File)) {
} else {
function handleFileDragEnter(e) {
e.stopPropagation();
e.preventDefault();
this.classList.add('hovering');
}
function handleFileDragLeave(e) {
e.stopPropagation();
e.preventDefault();
this.classList.remove('hovering');
}
function handleFileDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function handleFileDrop(e) {
e.stopPropagation();
e.preventDefault();
this.classList.remove('hovering');
var files = e.dataTransfer.files;
var outputStr = [];
for (var i = 0, f; f = files[i]; i++) {
var lastModified = f.lastModifiedDate;
var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString()
: 'n/a';
outputStr += '<li><strong>' + f.name + '</strong> ('
+ (f.type || 'n/a') + ')<br>大小：' + f.size
+ '字节<br>修改时间：' + lastModifiedStr + '</li>';
}
output.innerHTML = '<ul>' + outputStr + '</ul>';
}
dropZone.addEventListener('dragenter', handleFileDragEnter, false);
dropZone.addEventListener('dragleave', handleFileDragLeave, false);
dropZone.addEventListener('dragover', handleFileDragOver, false);
dropZone.addEventListener('drop', handleFileDrop, false);
}
</script>
</body>
分享到：
相关推荐
同时，当用户下载文件时，`InputStream`也能从服务器接收数据并保存到本地。 现在，让我们来看看压缩包中的“FileExplorer”文件。这很可能是整个文件浏览器应用的核心代码或者源码库。通常，一个简单的文件浏览器...
File API允许浏览器直接访问本地文件系统，从而实现了文件的本地预览。Drag and Drop API则让开发者可以轻松实现元素的拖放操作，这对于实现文件拖拽上传至关重要。 **文件拖拽上传** 1. **监听拖放事件**：使用...
在探讨JavaScript处理本地文件的能力时，我们主要关注的是在客户端（即用户浏览器）与服务器端进行文件操作的不同方法。由于安全限制，纯JavaScript在浏览器环境中直接读写用户计算机上的文件受到严格限制。然而，...
在Web环境中，由于安全限制，可能只能获取到文件的URL，而不是本地文件路径，需要通过FileReader API读取文件内容。 4. **权限与安全**：为了保护用户隐私，浏览器和其他应用程序通常会限制对文件系统的直接访问。...
3. **FileReader API**：这是HTML5中的另一个关键特性，用于读取和处理本地文件。在这个项目中，FileReader用于预览选定的文件，特别是图片文件，通过`readAsDataURL()`方法将文件内容转化为数据URL，然后插入到页面...
2. 文件上传：支持从本地文件系统选择文件或整个目录上传到HDFS。 3. 文件下载：可以将HDFS中的文件或目录下载到本地文件系统。 4. 文件操作：包括创建、重命名、移动、删除文件或目录，以及设置权限等。 5. 元数据...
通过深入研究这个文件浏览器的源代码，开发者不仅可以提升编程技能，还可以学习到软件工程的实践，包括代码组织结构、模块化设计、注释规范等。对于那些希望定制自己的文件管理器或改进现有应用的人来说，这是一个...
"拖拽文件、图片上传"这个话题聚焦于如何利用HTML5的拖放API来实现这种功能，让网页用户能够方便快捷地将本地文件或图片拖放到指定区域，实现无刷新上传。 首先，我们要理解HTML5的拖放API（Drag and Drop API），...
在Silverlight 4中，文件拖拽上传功能为用户提供了更加直观和便捷的文件上传方式，用户可以直接从他们的计算机文件系统将文件拖放到应用界面中，从而实现文件上传。这一特性显著提升了用户体验，减少了传统文件选择...
在IT行业中，开发一个文件浏览器应用是常见的任务之一，它能帮助用户方便地浏览和管理本地文件系统。本文将深入探讨“文件浏览器源码”这一主题，基于SWT（Standard Widget Toolkit）技术框架，以及RCP（Rich Client...
此外，FileReader API用于在浏览器中读取和显示本地文件内容，实现预览功能。配合AJAX，可以实现实时上传进度反馈，提升交互体验。 拖放功能是HTML5的一大亮点，通过dragstart、drag、dragenter、dragleave、...
4. 拖拽下载的CRX文件到扩展程序页面，浏览器会提示添加扩展，确认即可。 关于前端跨域，主要涉及以下几个知识点： 1. 同源策略：这是浏览器为了安全考虑实施的一项规定，只允许来自相同协议、域名和端口的请求访问...
File API允许JavaScript访问和操作用户选择的本地文件，提供了读取、写入和处理文件的能力。在HTML5中，`<input type="file">`元素可以接受用户选择的文件，并通过FileReader接口进行读取。同时，`drag`和`drop`事件...
本项目标题提到的".net版拖拽上传文件"显然是一款利用.NET框架实现的文件上传解决方案，允许用户通过拖放操作将本地文件上传至服务器。 首先，我们要理解.NET Framework是微软提供的一个全面的开发平台，包含了用于...
然后在该节点的"Texture"属性中，拖拽你刚刚导入的图片到输入框，这样图片就被连接到了材质上。 4. **应用材质**：现在你可以将这个材质应用到任何支持贴图的对象上，如静态网格物体、平面、球体等。在对象的细节...
HTML5文件拖拽功能是现代Web开发中的一个重要特性，它允许用户通过拖放操作将本地文件上传到网页，极大地提升了用户体验。这一特性结合了HTML5的`<input type="file">`元素、`DragEvent`事件以及`DataTransfer`对象...
总的来说，JavaScript 提供了强大的能力来处理文件拖放操作，允许开发者构建交互丰富的Web应用，允许用户直接从本地系统上传文件，极大地提升了用户体验。然而，需要注意的是，由于浏览器之间的差异，实际开发中可能...
Ray插件的使用，首先需要在Chrome浏览器中启用开发者模式，然后将`.crx`文件拖拽到浏览器的扩展页面进行安装。 Ray插件的主要特点包括： 1. **请求拦截与重定向**：Ray允许开发者捕获并修改HTTP和HTTPS请求。这在...
这个功能允许用户直接通过拖放操作将本地文件上传到服务器，极大地简化了上传流程。 首先，我们需要了解HTML5中的拖放API。这个API提供了一系列事件和接口，使得开发者可以轻松地创建拖放操作。主要涉及的事件有`...