- 浏览: 7935528 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
今天跟大家一起学习的是,使用HTML5中新提供的文件API,实现从客户端用户的文件夹中,拖拉文件到你的浏览器中,然后实现文件的上传.目前HTML5中只有FIREFOX和Chrome支持这种拖拉上传功能.下面具体代码学习之:
1) 首先本文会用到https://github.com/weixiyen/jquery-filedrop这里的一个
jquery drop的插件,它很方便的帮我们封装了不少东西,先下载之.
2) index.html 代码:
其中,引入了jquery库和jquery.filedrop.js这个库,而dropbox这个DIV
是用来做拖放文件用的区域.
接下来,再放置一个区域,是显示拖放图片后,对图片进行预览,并显示上传进度条的div,如下:
由于jquey filedrop这个插件已经帮我们做了不少东西了,所以我们只需要利用这个插件就可以了,其中asset/js/script.js代码如下:
稍微解析下,这里var reader = new FileReader();
是调用了HTML5的API,然后当用户从客户端的文件夹中拖拉了一张图片到拖放区域后,
图片实际上以dataurl形式保存(实际上是BASE64编码),
reader.readAsDataURL(file);
这里执行后,就会触发reader.onload 事件,这里就将img的src属性设置为图片的实际内容了,即显示一张100*100的图片预览图了.
接下来,当每张图片在dropbox区域中被显示后,这个时候可以触发file drop这个插件的上传功能了,接下来看这个插件的功能代码:
重点关注的方法为uploadStarted和progressUpdated.
而PHP部分接收文件的话,可以这样:
CSS代码为:
整个运行的DEMO为:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/
代码下载地址为:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/html5-file-upload.zip
1) 首先本文会用到https://github.com/weixiyen/jquery-filedrop这里的一个
jquery drop的插件,它很方便的帮我们封装了不少东西,先下载之.
2) index.html 代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</title> <!-- Our CSS stylesheet file --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>HTML5 File Upload with jQuery and PHP</h1> </header> <div id="dropbox"> <span class="message">Drop images here to upload. <i>(they will only be visible to you)</i></span> </div> <!-- Including The jQuery Library --> <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <!-- Including the HTML5 Uploader plugin --> <script src="assets/js/jquery.filedrop.js"></script> <!-- The main script file --> <script src="assets/js/script.js"></script> </body> </html>
其中,引入了jquery库和jquery.filedrop.js这个库,而dropbox这个DIV
是用来做拖放文件用的区域.
接下来,再放置一个区域,是显示拖放图片后,对图片进行预览,并显示上传进度条的div,如下:
<div class="preview done"> <span class="imageHolder"> <img src="" /> <span class="uploaded"></span> </span> <div class="progressHolder"> <div class="progress"></div> </div> </div>
由于jquey filedrop这个插件已经帮我们做了不少东西了,所以我们只需要利用这个插件就可以了,其中asset/js/script.js代码如下:
var template = '<div class="preview">'+ '<span class="imageHolder">'+ '<img />'+ '<span class="uploaded"></span>'+ '</span>'+ '<div class="progressHolder">'+ '<div class="progress"></div>'+ '</div>'+ '</div>'; function createImage(file){ var preview = $(template), image = $('img', preview); var reader = new FileReader(); image.width = 100; image.height = 100; reader.onload = function(e){ image.attr('src',e.target.result); }; reader.readAsDataURL(file); message.hide(); preview.appendTo(dropbox); $.data(file,preview); }
稍微解析下,这里var reader = new FileReader();
是调用了HTML5的API,然后当用户从客户端的文件夹中拖拉了一张图片到拖放区域后,
图片实际上以dataurl形式保存(实际上是BASE64编码),
reader.readAsDataURL(file);
这里执行后,就会触发reader.onload 事件,这里就将img的src属性设置为图片的实际内容了,即显示一张100*100的图片预览图了.
接下来,当每张图片在dropbox区域中被显示后,这个时候可以触发file drop这个插件的上传功能了,接下来看这个插件的功能代码:
$(function(){ var dropbox = $('#dropbox'), message = $('.message', dropbox); dropbox.filedrop({ //用来标识上传文件的数组名 paramname:'pic', //上传文件个数 maxfiles: 5, maxfilesize: 2, // 每个文件最大大小,为2MB url: 'post_file.php', uploadFinished:function(i,file,response){ $.data(file).addClass('done'); }, error: function(err, file) { switch(err) { case 'BrowserNotSupported': showMessage('Your browser does not support HTML5 file uploads!'); break; case 'TooManyFiles': alert('Too many files! Please select 5 at most!'); break; case 'FileTooLarge': alert(file.name+' is too large! Please upload files up to 2mb.'); break; default: break; } }, //判断每个上传的图片是否文件格式 beforeEach: function(file){ if(!file.type.match(/^image\//)){ alert('Only images are allowed!'); return false; } }, uploadStarted:function(i, file, len){ createImage(file); }, progressUpdated: function(i, file, progress) { $.data(file).find('.progress').width(progress); } }); var template = '...'; function createImage(file){ // ... see above ... } function showMessage(msg){ message.html(msg); } });
重点关注的方法为uploadStarted和progressUpdated.
而PHP部分接收文件的话,可以这样:
if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){ $pic = $_FILES['pic']; } //然后自己调用PHP代码去管理上传
CSS代码为:
/*------------------------- Dropbox Element --------------------------*/ #dropbox{ background:url('../img/background_tile_3.jpg'); border-radius:3px; position: relative; margin:80px auto 90px; min-height: 290px; overflow: hidden; padding-bottom: 40px; width: 990px; box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1); } #dropbox .message{ font-size: 11px; text-align: center; padding-top:160px; display: block; } #dropbox .message i{ color:#ccc; font-size:10px; } #dropbox:before{ border-radius:3px 3px 0 0; } /*------------------------- Image Previews --------------------------*/ #dropbox .preview{ width:245px; height: 215px; float:left; margin: 55px 0 0 60px; position: relative; text-align: center; } #dropbox .preview img{ max-width: 240px; max-height:180px; border:3px solid #fff; display: block; box-shadow:0 0 2px #000; } #dropbox .imageHolder{ display: inline-block; position:relative; } #dropbox .uploaded{ position: absolute; top:0; left:0; height:100%; width:100%; background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5); display: none; } #dropbox .preview.done .uploaded{ display: block; } /*------------------------- Progress Bars --------------------------*/ #dropbox .progressHolder{ position: absolute; background-color:#252f38; height:12px; width:100%; left:0; bottom: 0; box-shadow:0 0 2px #000; } #dropbox .progress{ background-color:#2586d0; position: absolute; height:100%; left:0; width:0; box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset; -moz-transition:0.25s; -webkit-transition:0.25s; -o-transition:0.25s; transition:0.25s; } #dropbox .preview.done .progress{ width:100% !important; }
整个运行的DEMO为:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/
代码下载地址为:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/html5-file-upload.zip
评论
3 楼
wangyudiwang
2012-04-25
为什么都打不开啊?
2 楼
flex_莫冲
2011-09-29
学习。。。
1 楼
songshuang
2011-09-29
诚挚邀请您加入ITeye HTML5群组,在这里大家可以尽情交流分享HTML5学习经验,ITeye会定期组织群组成员参加线上线下的技术交流活动和开发者聚会,有更多机会与业内HTML5牛人面对面交流,更多机会了解最新的HTML5技术发展动态!
http://html5.group.iteye.com/
http://html5.group.iteye.com/
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 816刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 529三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1570http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 814https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1694即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 1007不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3019参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93121. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 644http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 844http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9981 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 587虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 561【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1427https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 816深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 959(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1144https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3156http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1584canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 572http://www.ruanyifeng.com/blog/ ...
相关推荐
总结来说,`jQuery`实现图片即时上传的核心在于利用HTML5的File API和Ajax技术,结合`FormData`对象进行数据传输,同时针对旧版IE提供相应的兼容方案。这样的实现方式既能提供良好的用户体验,又能确保跨浏览器的...
在`canvasDemo-master`这个项目中,可能包含了实现上述功能的HTML、CSS和JavaScript代码,通过分析和学习这个示例,你可以深入理解如何结合HTML5、jQuery和Canvas来处理图片上传和旋转问题,这对于构建交互性强的...
在本文中,我们将深入探讨如何使用PHP、HTML和jQuery实现图片裁剪并上传的功能。这一技术在现代Web应用中非常常见,特别是在用户需要上传个人头像或者产品图片时,允许他们自定义裁剪区域可以极大地提升用户体验。 ...
这个“jQuery实现的对上传图片进行裁剪插件”就是为了满足这样的需求而设计的。下面将详细阐述这个插件的工作原理、功能特性以及使用方法。 首先,该插件基于JavaScript库jQuery构建,它允许开发者在客户端(用户的...
### jQuery实现上传图片预览 在现代Web开发中,用户交互体验是提升网站吸引力的关键因素之一。其中,图片上传预览功能是许多应用场景中的一个重要环节,例如社交媒体、在线购物平台等。通过使用jQuery库,我们可以...
PHP jQuery html5头像图片选取上传是一款使用HTML5 jquery实现的PHP图片截取及上传功能,可广泛应用于头像图片裁切上传中,HTML5环境,可方便移植到手机APP中使用。 PHP jQuery html5头像图片选取上传使用方法 ...
在网上找到了图片上传插件jquery.min.js,但没有上传功能,自己花了10分钟给加上去了哈,有bug留言,一般当天改完上传。 转自:素材火jQuery教程演示:http://www.sucaihuo.com/js/71.html
在IT行业中,jQuery是一个非常流行的JavaScript库...总的来说,"jQuery批量上传图片插件"是一个实用的工具,它结合了jQuery的便利性和文件上传的复杂性,为Web开发人员提供了一个快速实现批量图片上传功能的解决方案。
在jQuery中实现多附件上传,通常会结合HTML5的新特性,如`<input type="file">`元素的`multiple`属性,以及Ajax技术来实现实时上传进度和无刷新页面的体验。以下是一些关键的知识点: 1. **HTML5 File API**:HTML5...
本文将深入探讨如何利用jQuery实现拖拉布局,并分享相关知识点。 ### 1. jQuery UI中的Draggable和Droppable jQuery UI库扩展了jQuery的功能,提供了Draggable和Droppable两个插件,分别用于实现元素的拖动和放置...
5. **AJAX异步上传**:利用jQuery的AJAX功能,可以实现无刷新的图片上传,用户可以选择图片后立即看到上传进度,提高用户体验。在上传过程中,通常会显示上传进度条,以及成功或失败的反馈信息。 6. **图片预览功能...
`jQuery Jcrop`是一个流行的JavaScript库,它允许用户在浏览器端进行图像选择、裁剪和截图操作,进而实现上传到服务器并保存。这个库是基于jQuery构建的,因此可以方便地与现有的jQuery应用集成,提供了丰富的API和...
接下来,我们引入jQuery库(这里使用的是CDN链接)和自定义的`imagePreview.js`脚本,这个脚本将包含实现图片预览功能的代码。 在`js/imagePreview.js`文件中,我们可以编写以下JavaScript代码: ```javascript $...
jQuery+HTML5实现图片上传前预览效果,代码简洁,方便使用。
以上代码和步骤展示了如何使用jQuery实现一个简单的图片拖拽上传功能。请注意,实际应用中可能还需要考虑错误处理、进度指示、多文件上传、文件大小限制等功能。在开发过程中,请确保遵循最佳实践,如防止XSS攻击、...
"jQuery实现HTML5图片上传rar"这个主题就是关于如何利用jQuery库和HTML5的新特性来创建一个图片上传功能,特别是针对RAR文件的处理。在这个过程中,我们将深入探讨以下几个关键知识点: 1. **HTML5 File API**:...
### JQuery与Ajax结合实现批量图片上传的技术解析 在现代网页开发中,用户界面的互动性和数据处理效率成为了提升用户体验的关键因素。其中,批量上传图片功能是许多应用中不可或缺的一部分,尤其是在社交媒体、电子...
总的来说,这个项目结合了前端的用户交互、图片预览和裁剪,以及后端的文件上传处理和图片编辑,展示了PHP、jQuery和Ajax技术在实现动态Web应用中的协同工作。通过这样的功能,开发者可以为用户提供更加直观和便捷的...