html5拖動上傳圖片效果程式碼例項
本章節分享一段程式碼例項,它實現了拖動上傳圖片的功能。
需要的朋友可以做一下參考,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <div id="drop_area" style="width:300px;height:200px;background:#fcc;"></div> <div id="preview"></div> <script> //阻止預設事件 window.onload = function () { //拖離 document.addEventListener('dragleave', function (e) { e.preventDefault(); }); //拖後放 document.addEventListener('drop', function (e) { e.preventDefault(); }); //拖進 document.addEventListener('dragenter', function (e) { e.preventDefault(); }); //拖來拖去 document.addEventListener('dragover', function (e) { e.preventDefault(); }); var box = document.getElementById('drop_area'); //拖拽區域 box.addEventListener("drop", function (e) { e.preventDefault(); //取消預設瀏覽器拖拽效果 var fileList = e.dataTransfer.files; //獲取檔案物件 //檢測是否是拖拽檔案到頁面的操作 if (fileList.length == 0) { return false; } //檢測檔案是不是圖片 if (fileList[0].type.indexOf('image') === -1) { alert("您拖的不是圖片!"); return false; } //拖拉圖片到瀏覽器,可以實現預覽功能 var img = window.webkitURL.createObjectURL(fileList[0]); var filename = fileList[0].name; //圖片名稱 var filesize = Math.floor((fileList[0].size) / 1024); if (filesize > 500) { alert("上傳大小不能超過500K."); return false; } var image = document.createElement('img'); image.src = img; var p = document.createElement("p"); p.innerHTML = "圖片名稱:" + filename + "<br/>大小:" + filesize + "KB"; document.getElementById("preview").appendChild(image); document.getElementById("preview").appendChild(p); //上傳 xhr = new XMLHttpRequest(); xhr.open("post", "upload.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('mypic', fileList[0]); xhr.send(fd); }, false); }; </script> </body> </html>
相關文章
- 圖片上傳預覽效果程式碼例項
- jQuerydiv元素拖動效果程式碼例項jQuery
- 上傳圖片本地預覽例項程式碼
- 移動端div塊拖動效果程式碼例項
- javascript檢測上傳圖片大小程式碼例項JavaScript
- js實現的div拖動效果例項程式碼JS
- js圖片碎片化效果程式碼例項JS
- jQuery限制上傳圖片格式和大小程式碼例項jQuery
- 滑鼠按住拖動具有半透明效果的程式碼例項
- js物件導向封裝拖動效果程式碼例項JS物件封裝
- 可以拖動立方體3D效果程式碼例項3D
- js獲取上傳圖片尺寸和格式程式碼例項JS
- css實現圖片灰度效果程式碼例項CSS
- js圖片淡入淡出效果程式碼例項JS
- 拖動滾動條實現div跟隨效果程式碼例項
- jQuery選項卡切換圖片效果程式碼例項jQuery
- input file利用FileReader實現圖片上傳程式碼例項
- 圖片正反面翻轉效果程式碼例項
- js驗證上傳圖片副檔名型別程式碼例項JS型別
- 圖片滑過亮光光弧效果程式碼例項
- 可以限定拖動範圍的彈出視窗效果程式碼例項
- 通過拖動將商品新增到購物車效果程式碼例項
- SVG拖動繪製矩形程式碼例項SVG
- 可以拖動的div塊程式碼例項
- CSS3 圖片由遠及近自動放大效果程式碼例項CSSS3
- css實現圖片上下左右居中效果程式碼例項CSS
- 滑鼠滑過圖片出現光弧效果程式碼例項
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- css3控制多個背景圖片移動形成動畫效果程式碼例項CSSS3動畫
- canvas擺動效果程式碼例項Canvas
- css3動態背景圖片程式碼例項CSSS3
- 表格拖動滾動條標題固定程式碼例項
- 拖動滾動條載入資料程式碼例項
- ASP上傳圖片程式碼例子
- javascript和HTML5上傳圖片之前實現預覽效果JavaScriptHTML
- js拖動實現左右圖片對比效果JS
- css圖片變黑白程式碼例項CSS
- 利用css切割圖片程式碼例項CSS