HTML5 첨부파일 드래그 앤 드롭 업로드 드롭 및 google.gears 구현 code_javascript 기술

< script type="text/javascript" src="UpLoadFileXHR.js">

/* *
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'})
* url: 업로드 데이터 경로
* name: 백그라운드 읽기 데이터 이름
* XHR: google.gears 또는 new XMLHttpRequest()
* 형식: 업로드 형식 정규 표현식
*
*
* 메소드
* .onerror 함수 오류가 발생했습니다
* .onloadstart 함수 전송 시작 ​​Parameter 이벤트 객체 (google.gears를 사용하는 경우 해당 메소드 없음)
* .onprogress 함수 전송 진행 Parameter 이벤트 객체
* .onreadystatechange 함수 State Parameter this.XHR
*/
var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'})
upLoad.format = /jpg|gif|jpeg|png /; // 업로드 형식 설정
//정의 형식 오류 호출 메서드
upLoad.onformaterror = function(){
alert('업로드 형식 오류, [jpg|gif|jpeg|png] 형식만 해당 지원됨!');
}
// 업로드 상태 메소드 정의
// 작업 시간은 XMLhttprequest 객체 사용과 동일
upLoad.onreadystatechange = function(){
if (upLoad.XHR.readyState == 4 ){
log(upLoad.>}
//실시간 업로드 진행 상황 가져오기
upLoad.onprogress = function(e){
/*
* e.loaded 업로드된 데이터 크기
* e.전체 전체 크기
* Math.round((e.loaded * 100) / e.total) 데이터 업로드 비율
*/
log( '이미 업로드됨' Math.round((e.loaded * 100) / e .total) '%')
}


3: Bind drop

elem.ondragenter = upLoad.stopPrevent;
elem.ondragover = upLoad.stopPrevent;
elem.ondrop = function(e ){upLoad.stopPrevent(e);upLoad.start.call(upLoad, e)};
4: 드래그 가능

UpLoadFileXHR 사용 방법

새로운 UpLoadFileXHR(객체)
var upLoadFile = new UpLoadFileXHR({url:'',name:''})
URL	문자열	주소 업로드	필수
이름	문자열	백그라운드에서 얻은 데이터의 이름	필수
속성
형식	정규식	(/jpg|pen|jpeg|gif/)와 같은 파일 형식을 필터링합니다. 설정하지 않으면 모든 파일이 통과됩니다.	필요하지 않음
디버그	부울	디버그 활성화 여부	기본값 거짓
자동 완성 속성
XHR	객체	인스턴스화 후 속성은 브라우저에 따라 자동으로 채워지며 현재 파일을 업로드하는 데 사용되는 xhr 개체가 여기에 저장됩니다.	자동
지원	객체	현재 데이터 전송에 사용되는 것 new UpLoadFileXHR(Object) var upLoadFile = new UpLoadFileXHR({url:'',name:''}) url string 上传地址 必须 name string 后台取得数据的name 必须 属性 format RegExp 过滤文件类型比如(/jpg|pen|jpeg|gif/);不设置则所有文件通过 非必要 debug Boolean 是否开启debug 默认false 自动填充属性 XHR object 实例化以后根据浏览器自动填充的属性，这里保存了当前上传文件所使用的xhr对象 自动 support object 当前用什么传输数据 {googleGears:Boolean, fileReader:Boolean} 自动 方法 start function 绑定到drop事件上的方法,接收一个事件默认e参数。请把this指向你当前的调用start的对象   stopPrevent function 取消事件冒泡和事件默认动作 return false checkFile function 检查file属性(格式，大小等) return Boolean 事件 onerror function 出错 默认参数 e(错误对象) onformaterror function 格式不正确(判断依据 format 属性) 默认参数 file(当前file对象) onloadstart function 开始上传 默认参数 file(google.gears下) or e(XMLhttprequest下) onprogress function 上传进度 事件默认参数 onreadystatechange function 上传状态 事件默认参数 {googleGears:Boolean, fileReader:Boolean}	자동
방법
시작	기능	는 드롭 이벤트에 바인딩된 메서드이며 이벤트 기본 e 매개 변수를 받습니다. start를 호출하는 현재 객체를 가리키도록 하십시오.
중지방지	기능	이벤트 버블링 및 이벤트 기본 동작 취소	거짓 반환
파일 확인	기능	파일 속성(형식, 크기 등) 확인	부울 반환
이벤트
오류 발생 시	기능	오류	기본 매개변수 e(오류 개체)
형식 오류	기능	형식이 올바르지 않습니다(형식 속성에 따라 판단됨)	기본 매개변수 파일(현재 파일 객체)
로드시작	기능	업로드 시작	기본 매개변수 파일(google.gears 아래) 또는 e(XMLhttprequest 아래)
진행 중	기능	업로드 진행 상황	이벤트 기본 매개변수
준비 상태 변경 중	기능	업로드 상태	이벤트 기본 매개변수