API tools faq
paste
Advertisement
asimryu

Drag&Drop into indexedDb with images and videos

asimryu
Aug 13th, 2016
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Drag &amp; Drop Images and Preview with indexedDB</title>
  6.     <style>
  7.         #dropbox {
  8.             width: 100%;
  9.             height: 300px;
  10.             border: 1px solid #888;
  11.             background-color: #e5d6a9;
  12.             margin-top: 20px;
  13.             line-height: 300px;
  14.             text-align : center;
  15.         }
  16.         #imglist .box {
  17.             float: left;
  18.             width: 100px;
  19.             height: 100px;
  20.             border: 5px solid #eee;
  21.             margin: 5px;
  22.             position: relative;
  23.         }
  24.         #imglist .box:hover {
  25.             border: 5px solid #888;
  26.         }      
  27.         #imglist .btn-x {
  28.             position: absolute;
  29.             top: 5px;
  30.             right: 5px;
  31.             width: 20px;
  32.             height: 20px;
  33.             line-height: 20px;
  34.             text-align: center;
  35.             border-radius: 10px;
  36.             background-color: #000;
  37.             color: #fff;
  38.             cursor: pointer;
  39.             z-index: 999;
  40.         }
  41.         #imglist .preview {
  42.             position: absolute;
  43.             width: 100px;
  44.             height: 100px;         
  45.             top: 0;
  46.             left: 0;
  47.         }      
  48.         #imglist .btn-x:hover {
  49.             background-color: #f00;
  50.         }
  51.         #imglist img {
  52.             width: 100px;
  53.             height: 100px;
  54.            
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <div class="wrap">
  60.         <div>
  61.             <button onclick="clearData()">초기화(모든 레코드삭제)</button>
  62.             <button onclick="deleteDb('myphotogallary')">DB(myphotogallary) 삭제</button>
  63.             <button onclick="deleteAllDbs()">모든 DB 삭제(only for google chrome)</button>
  64.             <button onclick="location.reload()">페이지 새로고침</button>
  65.         </div>
  66.         <div id="dropbox" ondrop="drop(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">
  67.             Drop Images or Videos Here
  68.         </div>
  69.         <div id="imglist"></div>
  70.     </div>
  71.    
  72.     <script>
  73.  
  74.         var db;
  75.         var request = window.indexedDB.open("myphotogallary",1);
  76.        
  77.         request.onerror = function(event) {
  78.             console.log("error: ");
  79.          }
  80.          
  81.          request.onsuccess = function(event) {
  82.             db = request.result;
  83.             readAllDataFromDb();
  84.          }     
  85.  
  86.         request.onupgradeneeded = function(event) {
  87.             var result = event.target.result;
  88.             var objectStore = result.createObjectStore("photos",{ keyPath: "id", autoIncrement:true });
  89.          }        
  90.  
  91.         function addToDb(fileData) {
  92.             var transaction = db.transaction(["photos"], "readwrite");
  93.             var store = transaction.objectStore("photos");
  94.             var request = store.add(fileData);
  95.            
  96.             request.onsuccess = function(event) {
  97.                 //마지막으로 저장한 데이터의 key(id)를 얻는다.
  98.                 var dbid = event.target.result;
  99.                 fileData.id = dbid;
  100.                 showDropedFiles(fileData);
  101.             };
  102.            
  103.             request.onerror = function(event) {
  104.                alert("failed");
  105.             }
  106.          }
  107.  
  108.         function clearData() {
  109.             // 데이터 삭제를 위해 읽고 쓰기 가능한 db transaction을 연다.
  110.             var transaction = db.transaction(["photos"], "readwrite");
  111.            
  112.             // 작업이 모두 종료되면 처리할 내용...
  113.             transaction.oncomplete = function(event) {
  114.                 //imglist의 내용을 모두 비운다.
  115.                 document.getElementById("imglist").innerHTML = "";
  116.             };
  117.  
  118.             //에러가 발생하면 에러를 콘솔에 출력한다.
  119.             transaction.onerror = function(event) {
  120.                 console.log(transaction.error);
  121.             };
  122.  
  123.             // 트랜젝션의 stor를 연다. 즉 DB 테이블을 여는 것과 같다.
  124.             var store = transaction.objectStore("photos");
  125.  
  126.             // store, 즉 테이블을 모두 비운다.
  127.             var request = store.clear();
  128.  
  129.             // store, 즉 테이블 비우기가 성공하면 처리할 내용...
  130.             request.onsuccess = function(event) {
  131.                 // 메시지를 콘솔에 출력한다.
  132.                 console.log("DB 레코드를 모두 제거했습니다.");
  133.             };
  134.         }
  135.  
  136.         function deleteDb(dbname){
  137.             var request = indexedDB.deleteDatabase(dbname);
  138.             request.onsuccess = function () {
  139.                 console.log("데이터베이스(" + dbname + ")를 제거했습니다.");
  140.             };
  141.             request.onerror = function () {
  142.                 console.log("데이터베이스(" + dbname + ")를 제거하지 못했습니다.");
  143.             };
  144.             request.onblocked = function () {
  145.                 console.log("데이터베이스(" + dbname + ")가 열려 있어 제거할 수 없습니다.");
  146.             };
  147.         }
  148.  
  149.         function deleteAllDbs(dbname){
  150.             //모든 indexedDB를 제거 - google chrome에서만 작동, 참고코드임...
  151.  
  152.             db.close(); // 현재 열려 있는 DB는 삭제할 수 없으므로 삭제하려면 닫아주어야 한다.
  153.             //작업하고자 하는 DB를 삭제하면 데이터를 추가할 수 없으므로 페이지 새로고침 해주어 한다.
  154.             indexedDB.webkitGetDatabaseNames().onsuccess = function(sender,args) {
  155.                 var dblist = sender.target.result;
  156.                 if(dblist){
  157.                     var i;
  158.                     for( i = 0; i < dblist.length; i++ ){
  159.                         deleteDb(dblist[i]);
  160.                     }
  161.                 }
  162.             }
  163.             location.reload();
  164.         }
  165.  
  166.         var imagesArray = [];
  167.  
  168.         function drop(e){
  169.             e.preventDefault();
  170.             var data = e.dataTransfer;
  171.             var files = data.files;
  172.  
  173.             if( files ) {
  174.                 for(i=0;i<files.length;i++){
  175.                     if( files[i].type == "image/jpeg" || files[i].type == "image/gif" || files[i].type == "image/png" || files[i].type == "video/mp4") {
  176.                         readAndAddFiles(files[i]);
  177.                     }
  178.                 }
  179.             }
  180.             var tagetId = e.target.id; 
  181.             document.getElementById(tagetId).style.background = "#e5d6a9";
  182.         }
  183.  
  184.         function dragover(e){
  185.             e.preventDefault();
  186.             var tagetId = e.target.id;  document.getElementById(tagetId).style.background = "pink";
  187.         }  
  188.  
  189.         function dragleave(e){
  190.             e.preventDefault();
  191.             var tagetId = e.target.id;  document.getElementById(tagetId).style.background = "#e5d6a9";
  192.         }          
  193.  
  194.         function readAndAddFiles(file){
  195.             var reader = new FileReader();
  196.             reader.addEventListener("load",function(){
  197.                 var fileData = {"name":file.name,"size":file.size,"type":file.type,"src":reader.result};
  198.                 addToDb(fileData);
  199.             },false);
  200.             if( file ) reader.readAsDataURL(file);
  201.         }  
  202.        
  203.         function deleteFile(id){
  204.            var transaction = db.transaction(["photos"], "readwrite");
  205.            var store = transaction.objectStore("photos");
  206.            var request = store.delete(id);
  207.          
  208.            request.onsuccess = function(event) {
  209.                 var box = document.getElementById("box" + id);
  210.                 box.parentElement.removeChild(box);
  211.                 console.log("DB에서 선택한 파일 정보를 제거했습니다.");
  212.            };
  213.            
  214.            request.onerror = function(event) {
  215.               alert("DB에서 파일 제거에 실패했습니다.");
  216.            }
  217.         }
  218.         function showDropedFiles(fileData){
  219.             var box = "<div class='box' id='box" + fileData.id + "'>";
  220.             box += "<div class='btn-x' onclick='deleteFile(" + fileData.id + ")'>X</div>";
  221.             box += "<div class='preview'>";
  222.             //비디오 타입인지 비교해서 아니면 이미지로 처리하고 비디오이면 video 태그로 처리
  223.             if( fileData.type != "video/mp4") {
  224.                 box += "<img src='" + fileData.src + "' data-id='" + fileData.id + "' width='100' height='100' alt='" + fileData.name + "'>";
  225.             } else {
  226.                 // oncanplay="" : 비디오 재생준비가 되었을 때 videoHandler 함수 호출하도록 처리
  227.                 box += "<video src='" + fileData.src + "' data-id='" + fileData.id + "' width='100' height='100' oncanplay='videoHandler(this)'></video>";
  228.             }
  229.             box += "</div>"
  230.             box += "</div>"
  231.             document.getElementById("imglist").innerHTML += box;
  232.         }
  233.  
  234.         function readAllDataFromDb(){
  235.             var transaction = db.transaction(["photos"]);
  236.             var store = transaction.objectStore("photos");
  237.            
  238.             store.openCursor().onsuccess = function(event) {
  239.                 var cursor = event.target.result;
  240.                 if (cursor) {
  241.                     showDropedFiles(cursor.value);
  242.                     cursor.continue();
  243.                 } else {
  244.                     console.log("데이터가 없음");
  245.                 }
  246.             };
  247.         }
  248.  
  249.  
  250.         //비디오 재생 준비가 되었을 때 비디오의 시작 위치 지정(초단위)
  251.         function videoHandler(video){
  252.             video.currentTime = 1;
  253.         }
  254.     </script>
  255.     <!--
  256.     Drag & Drop으로 한 개 또는 여러 개의 이미지 파일 등록 후 미리보기 썸네일 보여주고 indexedDB에 저장하여
  257.     페이지를 다시 열었을 때 이 전에 등록한 이미지 썸네일 다시 보는 소스 코드
  258.  
  259.     [설명]
  260.     이 코드는 단지 image drag & drop과 indexedDB 활용을 위한 연습용 코드임.
  261.     localStorage는 허용 용량 등의 한계, DB와 같은 구조의어려움 등이 있는데 비해
  262.     indexedDB는 마치 Database처럼 사용할 수 있는 장점이 있음.
  263.  
  264.     Jul 08 2016
  265.     code by Ryu
  266.     -->
  267. </body>
  268. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!