HTML5和jquery实现图片拖拉上传
今天跟大家一起学习的是,使用HTML5中新提供的文件API,实现从客户端用户的文件夹中,拖拉文件到你的浏览器中,然后实现文件的上传.目前HTML5中只有FIREFOX和Chrome支持这种拖拉上传功能.下面具体代码学习之:

1) 首先本文会用到https://github.com/weixiyen/jquery-filedrop这里的一个
jquery drop的插件,它很方便的帮我们封装了不少东西,先下载之.

2) index.html 代码:

/*-------------------------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 1 楼 songshuang 2011-09-29 诚挚邀请您加入ITeye HTML5群组，在这里大家可以尽情交流分享HTML5学习经验，ITeye会定期组织群组成员参加线上线下的技术交流活动和开发者聚会，有更多机会与业内HTML5牛人面对面交流，更多机会了解最新的HTML5技术发展动态！

http://html5.group.iteye.com/

2 楼 flex_莫冲 2011-09-29 学习。。。 3 楼 wangyudiwang 2012-04-25 为什么都打不开啊？