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

Tencent Weibo도 최근 드래그 앤 드롭 업로드를 구현했습니다. 실제로는 매우 간단합니다.
서버 지원이 없기 때문에 기사에서 업로드 시연을 할 수 없습니다. 예시 다운로드
드래그 앤 드롭 업로드에 필요한 지원
1 : 브라우저가 드롭 이벤트를 지원해야 합니다. (드래그 이벤트에 대한 응답으로 파일 개체 가져오기);
2: XMLHttpRequest 개체에는 sendAsBinary 메서드(데이터 전송에 사용됨)가 있습니다.
위의 두 조건은 현재 Firefox에서만 달성됩니다.
Chrome의 첫 번째 항목은 표준을 충족하고, 두 번째 항목은 google.gears를 사용하여 시뮬레이션할 수 있습니다.
그래서 드래그 앤 드롭 업로드를 구현할 수 있는 브라우저에는 firefox3.6과 chrome7이 있습니다.
드래그 앤 드롭 업로드 구현 방법
1: 드롭 이벤트를 바인딩합니다.
2: 파일 객체를 가져옵니다.
3: 개체의 바이너리 데이터를 가져옵니다.
4: 데이터를 시뮬레이션하여 게시물 요청을 보냅니다.

XMLhttprequest와 google.gears는 매우 다르기 때문입니다.
그래서 항상 캡슐화합니다(UpLoadFileXHR). 위의 2, 3, 4단계를 요약했습니다.
UpLoadFileXHR을 인스턴스화하기만 하면 업로드할 파일을 끌어서 놓을 수 있습니다. 다운로드하려면 클릭

예

1: UpLoadFileXHR.js 파일 참조

코드 복사 코드는 다음과 같습니다.

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

2: upLoadFileXHR 바인딩 이벤트 인스턴스화, 매개변수 설정 등(예: 자세한 내용은 아래 UpLoadFileXHR 참조 소개)

코드 복사 코드는 다음과 같습니다.

/* *
* 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

코드 복사

코드는 다음과 같습니다. /* * ondrop 이벤트만 필요합니다* ondragenter 및 ondragover는 stopPrevent 메소드를 직접 바인딩하여 기본 작업을 취소합니다.* ondrop은 start 메소드를 바인딩합니다. 참고 여기서는 호출을 사용하여 인스턴스화한 개체를 가리켜야 합니다.

*/

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 아래)

진행 중

기능

업로드 진행 상황

이벤트 기본 매개변수

준비 상태 변경 중

기능

업로드 상태

이벤트 기본 매개변수