HTML5拖放（drag and drop）与plupload的懒人上传

HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放拖放是HTML5标准的一部分,任何元素都能够拖放,也能够将本地的文件拖放到页面上. 设置元素可拖放为了使元素可拖动,把 draggable 属性设置为 true <img draggable="true" /> 拖放事件有7个拖放事件可以捕获,如下: dragstart:开始拖元素触发 dragenter:元素拖进可dr…

HTML5 拖放---drag和drop

拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true: 例:<div id="div" draggable="true"></div>第二部:拖动什么--ondragstrat和setData() 例:function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); }上例中,数据类型是“Text”,值…

基于HTML5的Drag and Drop生成图片Base64信息

HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的朋友会发…

解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题

HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a href="tel:151********" class="phone"> HTML5实现一键发短信: <a href="sms:151********" class="message"> 是的,你没看错,在HT…

关于plupload组件无法拍照上传的解决方案

关于plupload组件无法拍照上传的解决方案其实是由于文件大小的问题 filters: { max_file_size: '2mb',//把这个调大些就可以了前提是服务器支持 prevent_duplicates : false, //是否允許選取重復文件 mime_types: [ {title: "files", extensions: "jpg,png,gif,jpeg"} ] }, 为啥有的在IOS可以上传 IOS相机算法比较好文件小所以就可…

HTML5 之拖放(drag与drop)

拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例下面的例子是一个简单的拖放实例: 实例1 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;b…

HTML5拖放(drag和drog)

拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就是把drapgable属性设置为true 2.拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么? (1):ondragstart属性调用了一个函数drag(ev),它规定了被拖动的数据. (2):ev.dataTransfer.setData()方法设置被拖动数据的数…

通过HTML5的Drag and Drop生成拓扑图片Base64信息

HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的…

plupload+struts2实现文件上传下载

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %> <%@ taglib prefix="s" uri="/struts-tags" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core&…

plupload.Uploader多文件上传

.前台 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonUpfile.aspx.cs" Inherits="HraWeb.ETL.CommonUpfile" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <h…

使用plupload实现多文件上传，自定义参数

下载地址:点击打开链接 1.在开发中可能需要用户附件上传的功能,实现批量上传功能其实就将多个上传任务放到一个集合中,分别上传. 2,使用plupload js插件可以很轻松的实现带参数的多文件上传 3.具体js实现方式 <script type="text/javascript"> var map={};//文件id为key,文件类型为value的集合 // Custom example logic var uploader…

HTML5中的input type为file控件限制上传文件类型及扩展

简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf"> 如果想在手机上实现拍照上传,添加如下代码: <input type="file" capture="ca…

html5 选择多张图片在页面内预览并上传到后台

版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张),确定后将选择的图片显示在页面上,点击提交将图片提交给后台. 效果图: <label>请选择一个图像文件:</label> <input type="file" id="pic_selector" multiple/> <!--…

plupload 大文件分片上传与PHP分片合并探索

最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没有什么收获了.其中对七牛云的服务很佩服的一点是,无论我上传多大的文件,当我文件最后一片上传完成的时候,就立刻返回到文件链接,这个问题我想了好久,也不知道七牛是如何做到的. 七牛云的sdk分为 JavaScript 与 PHP端. JavaScript端的作用是提供文件上传功能,客户端(浏览器)无需关…

HTML5利用FormData对象实现显示进度条的文件上传

摘自:https://blog.csdn.net/q1056843325/article/details/53759963 自己做是按这个实现的,兼容性还不错完整简约的解决方案下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面我尽量保证它的简洁所以如果你想要使用自己的布局和显示信息可以借此扩展 HTML5还引入了progress标签用于显示进度 progress元素有max和value属性,因此使用它可以更方便的显示进度但是,在写这篇文章…

炫酷的html5（Drag 和 drop）拖放

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. 实例: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2…

拖放(Drag和Drop)--html5

拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻烦.在html5中,引入了可以直接进行拖放的api,大大简化了我们的操作. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放.注释:在 Safari 5.1.2 中不支持拖放. 如何实现接下来用个实例来总结一下拖放的…

HTML 5 拖放(Drag 和drop)

浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加ondragstart 属性调用了一个函数drag(event). function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } //设置被拖数据的数据类型和值 3.向要拖放的位置(目标元素)标签添加ondrago…

Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]

英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文快速查看允许用户在Activity layout范围内用图形化的手势来转移数据可用于转移数据之外的其它用途只在同一应用程序内有效需要API 11. 在本文中概述拖放过程拖动事件侦听器及回调方法拖动事件拖动阴影拖放操作的设计开始拖动响应拖动开始事件拖动过程中的事件处理响应放下…

在Blazor中实现拖放(drag and drop)

前言我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通过拖拽的方式在这三种状态之间进行切换. 这种方式看起来真不错,但是使用Blazor来实现这种拖拽效果看起来似乎并不太容易. 经过一番百度难以找到,最后搜索英文通…

HTML5拖放(drag和drog)作品

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="Css/jquery-2.1.4.js"…

html5，js插件实现手机端实现头像剪切上传

思路:先打开相册,选取图片,在剪切图片,转化为base64格式,然后上传到七牛存储,返回url,再传给后端,整个流程就是这样.用的是angular框架,图像插件用到imagecropper.js,废话不多说,直接上代码. 效果: 用到的插件 <!DOCTYPE html> <html lang="en" ng-app=""> <head> <meta name="viewport" content=&qu…

HTML5 JS 压缩图片,并取得图片的BASE64编码上传

基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 canvas.toDataURL("image/jpeg", 0.1); 方法, 将图片变成base6…

Blazor 使用拖放（drag and drop）上传文件

在很多上传文件的应用实例中, 都可以看到[拖放文件到此上传]这种骚功能 ,今天我们就来试试Blazor能不能完成这个想法. 简述HTML5拖放拖放是HTML5标准的一部分,任何元素都能够拖放,也能够将本地的文件拖放到页面上. 设置元素可拖放为了使元素可拖动,把 draggable 属性设置为 t…

HTML5 拖放（Drag 和 Drop）功能开发——基础实战

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介拖拽(Drag/Drop)是个非常普遍的功能.在生活中,拖放物品其实是相当常见的一个动作.标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如<JS…

HTML5应用之文件拖拽上传

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

Plupload上传组件 + javaweb实现上传源码以及DEMO

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件: 上网找了很多Plupload的DEMO都无法正常使用, 而且Plupload官方的DEMO是基于PHP, 折腾了半天, 写了一个基于JAVA的DEMO: Plupload支持多种方式上传, 包括,flash上传(解决了不同服务器跨域的问题), html5方式上传, html4上传, silverlight的方式上传, Plupload的核心是另外一个JS库: MOXIE,…

前端上传组件Plupload使用指南

我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕竟html5原生的就给我们提供了文件上传的API.Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload. Plupload有以下功能和特点: 1.拥有多种上传方式:HTM…

plupload上传插件在SpringMVC中的整合

前言:近期在给学院的站点做一个加入附件的功能,首先到了某某邮箱看了一下.简单有用.可是是flash做的,无法拷贝.就仅仅好上网找插件了.经过筛选.最终找到plupload这款插件(其实有的编辑器自带加入附件功能).官网仅仅有PHP版本号.后来各种百度谷歌.找到的资料都用点小问题,拼搏一天最终实现了功能,以下就把遇到的问题和重点部分写出来.希望遇到相同问题的同学能够參考. 首先你须要下载plupload插件,下载地址:http://www.plupload.com/download/ JSP页面配…

Plupload 上传控件使用指南

本文转载至(感谢原作者分享):http://www.cnblogs.com/2050/p/3913184.html#plupload_doc2 我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕竟html5原生的就给我们提供了文件上传的API.Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易…

【HTML5拖放（drag and drop）与plupload的懒人上传】的更多相关文章