首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5 拖拽上传图片实例

因为标题写实例,所以本次就不做讲解了,因为这个实例我也算是东拼西凑整出来,参考了大概5、6款拖拽上传插件和demo,然后把其中好地方挑出来,最后就成了这么一个实例,一起来看下吧(地址不能保证长久有效...,以及上传时样式也进行了改动,之所以选这个原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规选择文件上传,另外就是添加网络图片。...它很巧妙把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片提示,如图:   拖拽上传最重要就是js部分代码,它实现了70%功能,另外30%仅仅是把图片信息提交到后台...browser.mozilla){ //FF4+ img.src = window.URL.createObjectURL(fileList[0]); }else{ //实例化...主要实现代码是从“功能实现”开始,这块具体为何这样操作,原理是什么,我就不多说了,大家可以参考下这篇文章:《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata

2.7K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5 拖放(实例:两个div之间拖放图片)

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据数据类型和值: ondragover...事件规定在何处放置被拖动数据。...如果需要设置允许放置,我们必须阻止对元素默认处理方式。 这要通过调用 ondragover 事件 event.preventDefault() 方法: 当放置被拖数据时,会发生 drop 事件。...调用 preventDefault() 来避免浏览器对数据默认处理(drop 事件默认行为是以链接形式打开) 通过 dataTransfer.getData("Text") 方法获得被拖数据。...该方法将返回在 setData() 方法中设置为相同类型任何数据。 被拖数据是被拖元素 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 结果----》 拖动前 ? 拖动后 ?

    2.2K10

    HTML5视音频代码实例 & WEBM格式转换器

    HTML5视音频代码实例&WEBM格式转换器 HTML5学堂:WebM由Google提出,是一个开放、免费媒体文件格式。...并且如何去做一个H5视频实例。 <!...还不太清楚如何通过js获取视频总播放时间 WebM由Google提出,是一个开放、免费媒体文件格式。...a元素支持"download"属性 下面的介绍引用自HTML5规范草案: 为了表明一个资源是让用户下载,而不是立即显示,可以给a元素或area元素添加download属性来创建一个能下载该资源超链接...; 兼容性问题: 补充说明:play()等方法在移动端并没有得到支持,在移动端,使用HTML5视音频,会自动调用软件内置播放器,用网页形式打开 欢迎沟通交流~HTML5学堂

    4K80

    HTML5Canvas

    关于HTML5基础,前一二年就已经有很多人写过很好文章了。...HTML5-Canvas 关于HTML5 Canvas基础教程  (原文HTML5 canvas - the basics) 在一些不支持flash设备中,如果要使用网页需要对一些图表数据进行展示,...比如需要将股票价格走势支持ipad、iphone等移动设备访问,有一个基于prototype插件可以满足类似的需求,官网网址>> 还有一个站点,针对canvas开发一套完整api,也是很强劲,...官网地址>> 尽管目前canvas只支持2d图形,而且仅支持一种图形--矩形,但它api是如此丰富,以致可以做出一些很吸引人应用。...国外有一个网站,Simple 3D HTML5 canvas 有几个例子,3D效果都很逼真: http://sebleedelisle.com/demos/canvas3d/canvas3d2.html

    1.3K20

    【Go 语言社区】HTML5 Canvas+JS控制电脑或手机上摄像头实例

    移动设备和桌面电脑上客户端API起初并不是同步。最初总是移动设备上先拥有某些功能和相应API,但慢慢,这些API会出现在桌面电脑上。...,但这里为了不那么麻烦,这里直接写出了这些HTML标记,需要注意是我们这里使用长宽是640×480。...JavaScript代码 因为我们是手工写出HTML,所以下面的js代码会比你想象要简单了很多。...以前我们需要使用第三方插件才能从浏览器里访问用户摄像头,这不免有些复杂。现在只需要HTML5画布技术和javaScript,我们就能简单快速操作用户摄像头。...不仅仅还是访问摄像头,而且是因为HTML5画布技术及其强大,我们可以给图片上加入各种迷人滤镜效果。现在,在浏览器里用自己摄像头给自己拍张照片吧!

    2K110

    HTML5html5开篇基础(3)

    ❤️❤️前言~ Hello, Hello~ 亲爱朋友们,这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章,请别吝啬你点赞❤️❤️和收藏。如果你对我内容感兴趣,记得关注我以便不错过每一篇精彩。...表格学习整体可以分为三大部分: 1.表格相关标签 2.表格相关属性 3.合并单元格 2.表格相关标签 在HTML中,创建表格基本标签包括: :定义一个表格。...:定义表格表头部分。用于将表头单元格()分组在一起,提供一种结构化方式来组织表格头部。可以包含多个行(),而不仅仅是一行表头。...:定义表格主体部分,包含实际数据行。只是单纯语义化,不会对内容做任何修饰。 :定义表格一行(row)。...:定义表格头部单元格(header cell),通常用于表头中内容,文本通常为粗体且居中显示。 :定义表格单元格(data cell),用于包含表格中数据。 <!

    1000

    HTML5File API

    HTML5FileReader对象与as3中很像,只不过目前as3中方法比这个多(有兴趣可以自己去看看adobelives docs,对比一下两者区别与共同点)。...HTML5中允许选择多个文件: 只允许上传一个文件: 2、如何让用户只能上传指定文件格式...我尝试着去寻找HTML5中是否也如as3中可以让开发者自定义过滤选择文件呢,结果被我找到了http://en.wikipedia.org/wiki/File_select  添加一个属性就好了accept...关于定义配置规则,可以参考这一篇文章:nginx下php获取自定义请求头参数方法 搜索了很多关于html5 upload例子,有人用.net、ruby写了,但没有找到用php写(有是有,不过是使用提交.../ 查了很久(已经很晚了,明天还得上班就不折腾了),暂时放弃php部分,有空再写完整例子,重点是看File、FileReader方法(实现了本地预览功能) 本地运行效果: ?

    1.9K20

    HTML5

    四、HTML5 一、什么是 HTML5 1.HTML5 概念与定义 定义:HTML5 定义了 HTML 标准最新版本,是对 HTML 第五次重大修改,号称下一代 HTML 两个概念: 是一个新版本...HTML 语言,定义了新标签、特性和属性 拥有一个强大技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上 HTML5 2.HTML5 拓展了哪些内容 语义化标签...本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 3.HTML5 现状 绝对多数新属性,都已经被浏览器所支持,最新版本浏览器已经开始陆续支持最新特性, 总的来说...:HTML5 已经是大势所趋 二、HTML5 新增标签 1.什么是语义化 2.新增了那些语义化标签 header --- 头部标签 nav --- 导航标签 article --- 内容标签...在 IE9 浏览器中,需要把语义化标签都转换为块级元素 语义化标签,在移动端支持比较友好, 另外,HTML5 新增了很多语义化标签,随着课程深入,还会学习到其他 三、多媒体音频标签 1.

    3.2K20

    HTML5废除元素

    HTML5新增了一些元素,但是也废除了一些元素,虽然这些元素在网页中仍然可以使用,但是避免以后网页显示出现问题,最好还是避免使用它们。...1、可以使用css替代元素 对于basefont、big、center、font、s、strike、tt、u这些元素,它们功能都是展现文本效果,HTML5提倡将呈线性功能放在css样式表中统一编辑,...其中s、strike元素可以由del元素替代,tt元素可以由cssfont-family属性替代。...2、不再使用frame框架 将frameset、frame和noframes元素废除,由于frame框架可以存在负面影响,在HTML5中不再支持了,只支持iframe框架(很多童鞋可能都不知道frame...框架) 3、只有部分浏览器支持元素 仅被IE支持元素:bgsound、marquee; 部分浏览支持元素:applet、blink; apple元素可由embed元素或者object元素替代 bgsound

    1.5K20
    领券