event.dataTransfer.items 拖拽上传

2024-11-05

HTML5拖拽功能中 dataTransfer对象详解

有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其这个对象到底包含了哪些玩意. FQ出去问了下谷歌找到了DataTransfer的API,下面就介绍一下: DataTransfer 拖拽数据传递对象,一般使用方式event.dataTransfer. dataTransfer . dropEffect [ = value ] 拖拽效果,可选值:“n

Java实现拖拽上传

原文:http://www.open-open.com/code/view/1437358795584 在项目开发中由于实际需求,需要开发拖拽上传的功能,ok! 先看效果图: jsp上传前端代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html>

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

一 . 背景及效果当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片文件上传也需要:选择路径再->上传->插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传.拖拽上传将大大提升体验. 当前知乎和github对现代浏览器均支持这两种特性,闲来无事就学习实现了一下,今天就说一说这个1kb插件实现什么功能,怎么使用和原理. 首先看一下插效果: 截图后直接粘贴上传. 拖

h5图片上传预览与拖拽上传

图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> &l

html5 文件拖拽上传

本文首先发表在码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来. 功能实现下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现. 首先会介绍一些必须的基础. 拖拽事件拖拽事件有下面这些: dragstart:当用户开始拖动对象时触发. dragenter: 当鼠标第一次经过目标元素,且有拖动发生时触发.此事件

原生API实现拖拽上传文件实践

功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉及到的API: 1.HTML5的拖拽事件:dragenter,dragover,drop等 2.XMLHttpRequest Level2 3.FormData 4.(扩展:HTML5的File API) 概述: 1.利用拖拽实践的API将一个普通的div自定义成一个放置目标,这里有一个技巧是放置

input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）

//上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept="*/*" type="file" name="html5uploader" style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:poi

jQuery插件之路(三)——文件上传（支持拖拽上传）

好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader()

js拖拽上传文件上传之拖拽上传

由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调用上传方法即可.拖拽上传能给用户多一种选择,提高用户体验,下面是最简单的一个推拽上传示例 HTML部分:  <div class="dropBox_wrap"> <div id="dropbox" class=&q

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料还有就是发掘到的比较牛逼的一篇博客:http:/

HTML5应用之文件拖拽上传

使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. HTML 我们在页面中放置一个拖拽区域#drop_area,即接收拖拽的区域,#preview用来预览拖拽上传的图片信息. <div id="drop_area">将图片拖拽到此区域</div> <div id="preview">&l

[转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽.FileReader实例教程) « 下一篇: 早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床.哦,Sorry, 是拖拽上传.到现在,这个功能已经上线了整整半年,这篇文章也足足拖延了半年才分享给大家,实在是对不住了,

[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP.NET中实现大文件传输.同时本文利用了Html5的新特性:支持拖拽. 本文的主要技术点在于:如何接收resumableJs的传送内容(官网不太清楚)和如何合并文件,难度并不高.如果要改为MVC中的Controller处理文件传输,方法也大同小异. 注:原博客中,此文章在原站点个人代码备份所用,注释不

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzone 的一个演示示例. 选定的文件并没有真正上传.) 新闻我刚刚发布 Dropzone v4.0.0! 它已经完全重新设计, 并已更新的网站. 非常感谢 1910 设计新的 logo 和网站. 它看起来非常棒. 看看他们的工作! 我在 COLORGLARE 上最新的文章: Stop writi

Nodejs express、html5实现拖拽上传

一.前言文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j

ajax拖拽上传文件

AJAX拖拽上传 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&

html5实现拖拽上传

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5拖拽上传</title> <style type="text/css"> #div1{ margin: 0 auto; width:200px; height:200px; backgro

day25—JavaScript实现文件拖拽上传案例实践

转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: <div id="box"> <span id="span">选择或拖放文件</span> <input id="browse" type="file"> </div> css

[python][flask] Flask 图片上传与下载例子（支持漂亮的拖拽上传）

目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html 介绍 5.1 upload Jinja 模板介绍 5.2 upload css 介绍(虚线框) 5.3 upload js 介绍(拖拽) 5.3.1 JS 拖拽框架 5.3.2 JS 图片上传 5.3.3 JS 图片上传进度条 6.后记参考链接 1.效果预览我们基于 Flask 官方指导工程,增

Dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"></form>

DropzoneJS 可以拖拽上传的js库

介绍可以拖拽上传的 js库网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload http://blueimp.github.io/jQuery-File-Upload/ 2. file-uploader https://github.com/Valums-File-Uploader/file-uploader 这2个类库分别用过..感觉,2轻巧方便些.. 这个dropzonejs 其实也很轻巧用法 1. add js and c

event.dataTransfer.items 拖拽上传

热门专题