上傳基本是項(xiàng)目中經(jīng)常出現(xiàn)的，一般采用：

1、form提交

2、flash

form提交會(huì)刷新頁(yè)面，很難做到異步上傳；flash可能是用得比較多了，因?yàn)榭梢约骖櫟綆缀跛械臑g覽器，我之前一直會(huì)用jQuery的uploadify作為項(xiàng)目中的上傳工具，uploadify也有基于Html5好像是收費(fèi)的，大家可以去官網(wǎng)看看；當(dāng)然了，現(xiàn)在html5提供了API以及File，FileReader，XMLHttpRequest等強(qiáng)大的API，為我們拖放實(shí)現(xiàn)上傳提供了可能。

效果圖1：

效果圖2：

由于本地上傳實(shí)在太快，錄了個(gè)80M的gif，終于可以看到上傳的細(xì)節(jié)效果了，是不是還是很不錯(cuò)的。

由于代碼比較多：

這一片主要講一下HTML和CSS：

HTML代碼：

• 12%

還是很簡(jiǎn)潔的：

a、一個(gè)div#uploadBox，里面ul li 代表每個(gè)上傳圖片單元

b、li img 圖片

c、li span.progress用于顯示進(jìn)度，有種水上漲的效果，從height:0% -100%;

d、li span.percentage 用于在圖片中央顯示 1% 到100%數(shù)字，當(dāng)?shù)竭_(dá)100%時(shí)，顯示一個(gè)正確的圖片

CSS：

body { background: #eee; } #uploadBox { width: 622px; height: 362px; background-color: #fff; border: 1px solid #777; margin: 120px auto; } #uploadBox ul li { float: left; position: relative; margin-left: 5px; margin-top: 5px; } #uploadBox li img { border: 1px solid #D1D1D1; width: 198px; height: 112px; vertical-align: middle; } #uploadBox li .percentage { width: 69px; height: 69px; position: absolute; left: 50%; top: 50%; margin-left: -34.5px; margin-top: -34.5px; text-align: center; font-size: 18px; line-height: 69px; color: #fff; border-radius: 34.5px; background: rgba(0, 0, 0, .8); } #uploadBox li.done .percentage { background: url("images/done.png") no-repeat 0 0; text-indent: -1000em; } #uploadBox li .progress { position: absolute; height: 22.4px; bottom: 0px; width: 200px; background: #000; opacity: .5; } .clearfix { clear: both; }

都是比較簡(jiǎn)單的，基本就是定位的簡(jiǎn)單使用~大家自己看下~

最后效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。

本文來(lái)自網(wǎng)絡(luò)收集，不代表猴子技術(shù)宅立場(chǎng)，如涉及侵權(quán)請(qǐng)點(diǎn)擊右邊聯(lián)系管理員刪除。

如若轉(zhuǎn)載，請(qǐng)注明出處：https://www.ssfiction.com/html5/471983.html

總結(jié)

以上是生活随笔為你收集整理的无插件HTML,HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）分享！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。