Commitf14fa32

committed

Merge pull request#12 from theoephraim/master

Allow user to trigger upload start by passing in an HTML5 file drop event

2 parents31c339b +fb82d7c commitf14fa32Copy full SHA for f14fa32

File tree

2 files changed

+45

-7

lines changed

2 files changed

+45

-7

lines changed

`‎example.html`

Lines changed: 31 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -4,9 +4,17 @@`
`4`	`4`	`<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"type="text/javascript"></script>`
`5`	`5`	`<scriptsrc="jquery.html5_upload.js"type="text/javascript"></script>`
`6`	`6`	`<metacontent="text/html; charset=utf-8"http-equiv="Content-Type"/>`
	`7`	`+`
	`8`	`+<style>`
	`9`	`+#drop_area.file_hover {`
	`10`	`+background:red;`
	`11`	`+ }`
	`12`	`+`
	`13`	`+</style>`
`7`	`14`	`</head>`
`8`	`15`	`<body>`
`9`	`16`	`<inputtype="file"multiple="multiple"id="upload_field"/>`
	`17`	`+<divid="drop_area"style="margin:20px 0; width:300px; padding:20px; border:1px dashed black;">or drop file(s) here</div>`
`10`	`18`	`<divid="progress_report">`
`11`	`19`	`<divid="progress_report_name"></div>`
`12`	`20`	`<divid="progress_report_status"style="font-style: italic;"></div>`
`@@ -16,7 +24,7 @@`
`16`	`24`	`</div>`
`17`	`25`	`<scripttype="text/javascript">`
`18`	`26`	`$(function(){`
`19`		`-$("#upload_field").html5_upload({`
	`27`	`+var$input=$("#upload_field").html5_upload({`
`20`	`28`	`url:function(number){`
`21`	`29`	`returnprompt(number+" url","/");`
`22`	`30`	`},`
`@@ -44,6 +52,28 @@`
`44`	`52`	`alert('error while uploading file '+name);`
`45`	`53`	`}`
`46`	`54`	`});`
	`55`	`+`
	`56`	`+`
	`57`	`+`
	`58`	`+// Example of how to use this with a html5 drop event`
	`59`	`+`
	`60`	`+// this is absolutely necessary -- see http://weblog.bocoup.com/using-datatransfer-with-jquery-events/`
	`61`	`+$.event.props.push('dataTransfer');`
	`62`	`+`
	`63`	`+var$drop=$('#drop_area');`
	`64`	`+$drop.on('dragover dragenter',function(e){`
	`65`	`+$drop.addClass('file_hover');`
	`66`	`+returnfalse;`
	`67`	`+}).on('dragleave dragexit',function(e){`
	`68`	`+$drop.removeClass('file_hover');`
	`69`	`+returnfalse;`
	`70`	`+}).on('drop',function(e){`
	`71`	`+if(e.originalEvent.dataTransfer&&e.originalEvent.dataTransfer.files.length){`
	`72`	`+$input.trigger('html5_upload.startFromDrop',e);`
	`73`	`+}`
	`74`	`+returnfalse;`
	`75`	`+})`
	`76`	`+`
`47`	`77`	`});`
`48`	`78`	`</script>`
`49`	`79`	`</body>`

`‎jquery.html5_upload.js`

Lines changed: 14 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,14 @@`
`1`	`1`	`(function($){`
`2`		`-jQuery.fn.html5_upload=function(options){`
	`2`	`+$.fn.html5_upload=function(options){`
	`3`	`+`
`3`	`4`	`functionget_file_name(file){`
`4`	`5`	`returnfile.name\|\|file.fileName;`
`5`	`6`	`}`
`6`	`7`	`functionget_file_size(file){`
`7`	`8`	`returnfile.size\|\|file.fileSize;`
`8`	`9`	`}`
`9`	`10`	`varavailable_events=['onStart','onStartOne','onProgress','onFinishOne','onFinish','onError'];`
`10`		`-varoptions=jQuery.extend({`
	`11`	`+varoptions=$.extend({`
`11`	`12`	`onStart:function(event,total){`
`12`	`13`	`returntrue;`
`13`	`14`	`},`
`@@ -78,8 +79,7 @@`
`78`	`79`	`}`
`79`	`80`	`},options);`
`80`	`81`
`81`		`-functionupload(){`
`82`		`-varfiles=this.files;`
	`82`	`+functionupload(files){`
`83`	`83`	`vartotal=files.length;`
`84`	`84`	`var$this=$(this);`
`85`	`85`	`if(!$this.triggerHandler('html5_upload.onStart',[total])){`
`@@ -210,12 +210,15 @@`
`210`	`210`
`211`	`211`	`try{`
`212`	`212`	`returnthis.each(function(){`
	`213`	`+varfile_input=this;`
`213`	`214`	`this.html5_upload={`
`214`	`215`	`xhr:newXMLHttpRequest(),`
`215`	`216`	`continue_after_abort:true`
`216`	`217`	`};`
`217`	`218`	`if(options.autostart){`
`218`		`-$(this).bind('change',upload);`
	`219`	`+$(this).bind('change',function(e){`
	`220`	`+upload.call(e.target,this.files);`
	`221`	`+});`
`219`	`222`	`}`
`220`	`223`	`varself=this;`
`221`	`224`	`$.each(available_events,function(event){`
`@@ -224,6 +227,11 @@`
`224`	`227`	`}`
`225`	`228`	`});`
`226`	`229`	`$(this)`
	`230`	`+.bind('html5_upload.startFromDrop',function(e,dropEvent){`
	`231`	`+if(dropEvent.dataTransfer&&dropEvent.dataTransfer.files.length){`
	`232`	`+upload.call(file_input,dropEvent.dataTransfer.files);`
	`233`	`+}`
	`234`	`+})`
`227`	`235`	`.bind('html5_upload.start',upload)`
`228`	`236`	`.bind('html5_upload.cancelOne',function(){`
`229`	`237`	`this.html5_upload['xhr'].abort();`
`@@ -245,4 +253,4 @@`
`245`	`253`	`returnfalse;`
`246`	`254`	`}`
`247`	`255`	`};`
`248`		`-})(jQuery);`
	`256`	`+})(jQuery);`

0 commit comments

Comments

(0)

Movatterモバイル変換

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commitf14fa32

File tree

2 files changed

2 files changed

`‎example.html`

`‎jquery.html5_upload.js`

0 commit comments