js 플러그인 작성 (그림 업로드)

3756 단어
upload.js/**
  • 업로드 컨트롤 구성 요소를 정의하고 jQuery 플러그인에 의존해야 합니다
  • created by dake 2018/10/22 */(function ((id); var defaultOpt = { boxWidth:'200px', boxHeight:'200px' } this.preview = .extend(true, defaultOpt,{ }, options); this.init(); this.callback = this.opts.callback; }//원형 메서드 DragImgUpload를 정의합니다.prototype = { constructor: DragImgUpload, init:function () { this.me.append(this.preview); this.cssInit(); this.eventClickInit(); }, cssInit:function () { this.me.css({ 'width':this.opts.boxWidth, 'height':this.opts.boxHeight, 'border':'2px solid #cccccc', 'padding':'10px', 'cursor':'pointer' }) this.preview.css({'height':'100%','overflow':'hidden'})
     },
     onDragover:function (e) {
         e.stopPropagation();
         e.preventDefault();
         e.dataTransfer.dropEffect = 'copy';
     },
     onDrop:function (e) {
         var self = this;
         e.stopPropagation();
         e.preventDefault();
         var fileList = e.dataTransfer.files; //      
         // do something upload
         if(fileList.length == 0){
             return false;
         }
         //         
         if(fileList[0].type.indexOf('image') === -1){
             alert("       !");
             return false;
         }
    
         //        ,        
         var img = window.URL.createObjectURL(fileList[0]);
         var filename = fileList[0].name; //    
         var filesize = Math.floor((fileList[0].size)/1024);
         if(filesize>500){
             alert("        500K.");
             return false;
         }
    
         self.me.find("img").attr("src",img);
         self.me.find("img").attr("title",filename);
         if(this.callback){
             this.callback(fileList);
         }
     },
     eventClickInit:function () {
         var self = this;
         this.me.unbind().click(function () {
             self.createImageUploadDialog();
         })
         var dp = this.me[0];
         dp.addEventListener('dragover', function(e) {
             self.onDragover(e);
         });
         dp.addEventListener("drop", function(e) {
             self.onDrop(e);
         });
    
    
     },
     onChangeUploadFile:function () {
         var fileInput = this.fileInput;
         var files = fileInput.files;
         var file = files[0];
         var img = window.URL.createObjectURL(file);
         var filename = file.name;
         this.me.find("img").attr("src",img);
         this.me.find("img").attr("title",filename);
         if(this.callback){
             this.callback(files);
         }
     },
     createImageUploadDialog:function () {
         var fileInput = this.fileInput;
         if (!fileInput) {
             //    input  
             fileInput = document.createElement('input');
             //  input type     
             fileInput.type = 'file';
             //    name
             fileInput.name = 'ime-images';
             //        
             fileInput.multiple = true;
             fileInput.onchange  = this.onChangeUploadFile.bind(this);
             this.fileInput = fileInput;
         }
         //    input    ,         
         fileInput.click();
     }
    
    }//구성 요소를 초기화하는 방법this=this.data('dragImgupload'), options = typeof option === 'object' && option; if (!data) { .fn.dragImgUpload.Constructor = DragImgUpload;

  • })(window.jQuery);
    2. 타이틀 초기화
    <p>




    <br> var dragImgUpload =$("#drop_area").dragImgUpload({<br>callback:function(files) {<br>//리셋 함수, 백엔드 등등에 전달할 수 있는 <br>var file = files[0];<br>console.log(file.name), <br>lt;br> })<br> console.log(dragImgUpload);<br>

    좋은 웹페이지 즐겨찾기