上傳基本是項目中經常出現的，一般采用：

1、form提交

2、flash

form提交會刷新頁面，很難做到異步上傳；flash可能是用得比較多了，因為可以兼顧到幾乎所有的瀏覽器，我之前一直會用jQuery的uploadify作為項目中的上傳工具，uploadify也有基于Html5好像是收費的，大家可以去官網看看；當然了，現在html5提供了API以及File，FileReader，XMLHttpRequest等強大的API，為我們拖放實現上傳提供了可能。

效果圖1：

效果圖2：

由于本地上傳實在太快，錄了個80M的gif，終于可以看到上傳的細節效果了，是不是還是很不錯的。

由于代碼比較多：

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

HTML代碼：

• 12%

還是很簡潔的：

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

b、li img 圖片

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

d、li span.percentage 用于在圖片中央顯示 1% 到100%數字，當到達100%時，顯示一個正確的圖片

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; }

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

最后效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

本文來自網絡收集，不代表猴子技術宅立場，如涉及侵權請點擊右邊聯系管理員刪除。

如若轉載，請注明出處：https://www.ssfiction.com/html5/471983.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。