@ -43,6 +43,11 @@
< / style > < / style >
< script > < script >
const createId = function ( ) {
return Math . random ( ) . toString ( 36 ) . substr ( 2 ) ;
}
export default { export default {
props : {
props : {
title : {
title : {
@ -51,14 +56,18 @@ export default {
} ,
} ,
name : {
name : {
type : String ,
type : String ,
required : true
default : 'file' ,
} ,
drop : {
default : false ,
} ,
} ,
id : {
extensions : {
} ,
postAction : {
type : String ,
type : String ,
} ,
} ,
a ction: {
putA ction: {
type : String ,
type : String ,
required : true
} ,
} ,
accept : {
accept : {
type : String ,
type : String ,
@ -91,6 +100,8 @@ export default {
files : [ ] ,
files : [ ] ,
active : false ,
active : false ,
uploaded : true ,
uploaded : true ,
dropActive : false ,
dropElement : false ,
request : {
request : {
data : { } ,
data : { } ,
headers : { } ,
headers : { } ,
@ -98,6 +109,10 @@ export default {
}
}
} ,
} ,
created ( ) {
this . _drop ( this . drop ) ;
} ,
init ( ) {
init ( ) {
var input = document . createElement ( 'input' ) ;
var input = document . createElement ( 'input' ) ;
input . type = 'file' ;
input . type = 'file' ;
@ -107,15 +122,20 @@ export default {
this . $mode = 'html4' ;
this . $mode = 'html4' ;
}
}
this . _index = 0 ;
this . _index = 0 ;
this . _dropActive = 0 ;
this . _files = { } ;
this . _files = { } ;
} ,
} ,
beforeDestroy ( ) {
beforeDestroy ( ) {
this . active = false ;
this . active = false ;
this . files = [ ] ;
this . files = [ ] ;
} ,
} ,
watch : {
watch : {
drop ( value ) {
this . _drop ( value ) ;
} ,
files ( files ) {
files ( files ) {
var ids = [ ] ;
var ids = [ ] ;
for ( var i = 0 ; i < files . length ; i ++ ) {
for ( var i = 0 ; i < files . length ; i ++ ) {
@ -162,6 +182,78 @@ export default {
} ,
} ,
methods : {
methods : {
_drop ( value ) {
if ( this . dropElement ) {
try {
if ( this . $mode === 'html5' ) {
window . document . removeEventListener ( 'dragenter' , this . _onDragenter , false ) ;
window . document . removeEventListener ( 'dragleave' , this . _onDragleave , false ) ;
this . dropElement . removeEventListener ( 'dragover' , this . _onDragover , false ) ;
this . dropElement . removeEventListener ( 'drop' , this . _onDrop , false ) ;
}
} catch ( e ) {
}
}
if ( ! value ) {
this . dropElement = false ;
return ;
}
if ( typeof value == 'string' ) {
this . dropElement = document . querySelector ( value ) ;
} else if ( typeof value == 'boolean' ) {
this . dropElement = this . $parent . $el ;
} else {
this . dropElement = this . drop ;
}
if ( this . $mode === 'html5' ) {
window . document . addEventListener ( 'dragenter' , this . _onDragenter , false ) ;
window . document . addEventListener ( 'dragleave' , this . _onDragleave , false ) ;
this . dropElement . addEventListener ( 'dragover' , this . _onDragover , false ) ;
this . dropElement . addEventListener ( 'drop' , this . _onDrop , false ) ;
}
} ,
_onDragenter ( e ) {
this . _dropActive ++ ;
this . dropActive = ! ! this . _dropActive ;
e . preventDefault ( ) ;
} ,
_onDragleave ( e ) {
e . preventDefault ( ) ;
this . _dropActive -- ;
if ( e . target . nodeName == 'HTML' || ( e . screenX == 0 && e . screenY == 0 ) ) {
this . dropActive = ! ! this . _dropActive ;
}
} ,
_onDragover ( e ) {
e . preventDefault ( ) ;
} ,
_onDrop ( e ) {
this . _dropActive = 0 ;
this . dropActive = false ;
e . preventDefault ( ) ;
if ( e . dataTransfer . files . length ) {
for ( var i = 0 ; i < e . dataTransfer . files . length ; i ++ ) {
var file = e . dataTransfer . files [ i ] ;
var id = createId ( ) ;
var value = { id : id , size : file . size , name : file . name , progress : '0.00' , speed : 0 , active : false , error : '' , errno : '' , success : false , data : { } , request : { headers : { } , data : { } } } ;
this . _files [ id ] = { file : file } ;
var len ;
if ( this . multiple ) {
len = this . files . push ( value ) ;
} else {
this . files = [ value ] ;
len = 1 ;
}
this . _files [ id ] . _file = this . files [ len - 1 ] ;
this . $dispatch ( 'addFileUpload' , this . files [ len - 1 ] , this ) ;
}
}
} ,
_addFileUploads ( el ) {
_addFileUploads ( el ) {
var Component = this . $options . components . inputFile ;
var Component = this . $options . components . inputFile ;
new Component ( {
new Component ( {
@ -174,8 +266,8 @@ export default {
if ( el . files ) {
if ( el . files ) {
for ( var i = 0 ; i < el . files . length ; i ++ ) {
for ( var i = 0 ; i < el . files . length ; i ++ ) {
var file = el . files [ i ] ;
var file = el . files [ i ] ;
var id = 'upload-file-' + Math . random ( ) . toString ( 36 ) . substr ( 2 ) ;
var id = createId ( ) ;
var value = { id : id , size : file . size , name : file . name , progress : '0.00' , : false , error : '' , errno : '' , success : false , data : { } , request : { headers : { } , data : { } } } ;
var value = { id : id , size : file . size , name : file . name , progress : '0.00' , speed: 0 , active: false , error : '' , errno : '' , success : false , data : { } , request : { headers : { } , data : { } } } ;
this . _files [ id ] = { el : el , file : file } ;
this . _files [ id ] = { el : el , file : file } ;
var len ;
var len ;
@ -189,8 +281,8 @@ export default {
this . $dispatch ( 'addFileUpload' , this . files [ len - 1 ] , this ) ;
this . $dispatch ( 'addFileUpload' , this . files [ len - 1 ] , this ) ;
}
}
} else {
} else {
var id = 'upload-file-' + Math . random ( ) . toString ( 36 ) . substr ( 2 ) ;
var id = createId ( ) ;
var value = { id : id , size : - 1 , name : el . value . replace ( /^.*?([^\/\\\r\n]+)$/ , '$1' ) , progress : '0.00' , : false , error : '' , errno : '' , success : false , data : { } , request : { headers : { } , data : { } } } ;
var value = { id : id , size : - 1 , name : el . value . replace ( /^.*?([^\/\\\r\n]+)$/ , '$1' ) , progress : '0.00' , speed: 0 , active: false , error : '' , errno : '' , success : false , data : { } , request : { headers : { } , data : { } } } ;
this . _files [ id ] = { el : el } ;
this . _files [ id ] = { el : el } ;
var len ;
var len ;
if ( this . multiple ) {
if ( this . multiple ) {
@ -220,10 +312,46 @@ export default {
continue ;
continue ;
}
}
if ( this . extensions . length || typeof this . extensions . length == 'undefined' ) {
var extensions = this . extensions ;
if ( typeof extensions == 'object' && RegExp instanceof extensions ) {
} else {
if ( typeof extensions == 'string' ) {
extensions = extensions . split ( ',' ) . map ( function ( value ) {
return value . trim ( ) ;
} ) . filter ( function ( value ) {
return value ;
} ) ;
}
extensions = new RegExp ( '\\.(' + extensions . join ( '|' ) . replace ( /\./g , '\\.' ) + ')$' , 'i' ) ;
}
if ( file . name . search ( extensions ) == - 1 ) {
file . error = 'Extension' ;
file . errno = 'extension' ;
continue ;
}
}
if ( this . $mode == 'html5' ) {
if ( this . $mode == 'html5' ) {
if ( this . putAction || file . putAction ) {
this . _fileUploadPut ( file ) ;
} else if ( this . postAction || file . postAction ) {
this . _fileUploadHtml5 ( file ) ;
this . _fileUploadHtml5 ( file ) ;
} else {
} else {
file . error = 'Not Support' ;
file . errno = 'not_support' ;
continue ;
}
} else {
if ( this . postAction || file . postAction ) {
this . _fileUploadHtml4 ( file ) ;
this . _fileUploadHtml4 ( file ) ;
} else {
file . error = 'Not Support' ;
file . errno = 'not_support' ;
continue ;
}
}
}
return ;
return ;
}
}
@ -231,24 +359,12 @@ export default {
this . uploaded = true ;
this . uploaded = true ;
} ,
} ,
_fileUpload Html5( file ) {
_fileUpload Xhr( xhr , file , data ) {
var _self = this ;
var _self = this ;
var file2 = this . _files [ file . id ] ;
var file2 = this . _files [ file . id ] ;
var fileUploads = false ;
var fileUploads = false ;
var speedTime = 0 ;
var form = new window . FormData ( ) ;
var speedLoaded = 0 ;
form . append ( this . name , file2 . file ) ;
for ( var key in this . request . data ) {
form . append ( key , this . request . data [ key ] ) ;
}
for ( var key in file . request . data ) {
form . append ( key , file . request . data [ key ] ) ;
}
var xhr = new XMLHttpRequest ( ) ;
xhr . upload . onprogress = function ( e ) {
xhr . upload . onprogress = function ( e ) {
if ( file . removed ) {
if ( file . removed ) {
xhr . abort ( ) ;
xhr . abort ( ) ;
@ -260,6 +376,12 @@ export default {
}
}
if ( e . lengthComputable ) {
if ( e . lengthComputable ) {
file . progress = ( e . loaded / e . total * 100 ) . toFixed ( 2 ) ;
file . progress = ( e . loaded / e . total * 100 ) . toFixed ( 2 ) ;
var speedTime2 = Math . round ( Date . now ( ) / 1000 ) ;
if ( speedTime2 != speedTime ) {
file . speed = e . loaded - speedLoaded ;
speedLoaded = e . loaded ;
speedTime = speedTime2 ;
}
}
}
_self . $dispatch ( 'fileUploadProgress' , file , _self ) ;
_self . $dispatch ( 'fileUploadProgress' , file , _self ) ;
} ;
} ;
@ -329,23 +451,28 @@ export default {
xhr . timeout = this . timeout ;
xhr . timeout = this . timeout ;
}
}
xhr . open ( 'POST' , this . action ) ;
xhr . onload = callback ;
xhr . onerror = callback ;
xhr . onabort = callback ;
xhr . ontimeout = callback ;
if ( this . timeout ) {
xhr . timeout = this . timeout ;
}
xhr . setRequestHeader ( 'X-Requested-With' , 'XMLHttpRequest' ) ;
xhr . setRequestHeader ( 'X-Requested-With' , 'XMLHttpRequest' ) ;
for ( var key in this . request . headers ) {
for ( var key in this . request . headers ) {
xhr . setRequestHeader ( key , this . request . headers [ key ] ) ;
xhr . setRequestHeader ( key , this . request . headers [ key ] ) ;
}
}
for ( var key in file . request . headers ) {
for ( var key in file . request . headers ) {
xhr . setRequestHeader ( key , file . request . headers [ key ] ) ;
xhr . setRequestHeader ( key , file . request . headers [ key ] ) ;
}
}
xhr . send ( form ) ;
xhr . send ( data ) ;
file . active = true ;
file . active = true ;
file2 . xhr = xhr ;
file2 . xhr = xhr ;
var interval = setInterval ( function ( ) {
var interval = setInterval ( function ( ) {
if ( ! _self . active || ! file . active || file . success || file . errno ) {
if ( ! _self . active || ! file . active || file . success || file . errno ) {
clearInterval ( interval ) ;
clearInterval ( interval ) ;
@ -353,9 +480,42 @@ export default {
xhr . abort ( ) ;
xhr . abort ( ) ;
}
}
}
}
} , 5 0) ;
} , 10 0) ;
this . $dispatch ( 'beforeFileUpload' , file , this ) ;
this . $dispatch ( 'beforeFileUpload' , file , this ) ;
} ,
} ,
_fileUploadPut ( file ) {
var _self = this ;
var querys = Vue . util . extend ( Vue . util . extend ( { } , this . request . data ) , file . request . data ) ;
var queryArray = [ ] ;
for ( let key in querys ) {
if ( querys [ key ] !== null && typeof querys [ key ] !== 'undefined' ) {
queryArray . push ( encodeURIComponent ( key ) + '=' + encodeURIComponent ( querys [ key ] ) ) ;
}
}
var queryString = queryArray . length ? '?' + queryArray . join ( '&' ) : '' ;
var xhr = new XMLHttpRequest ( ) ;
xhr . open ( 'PUT' , ( file . putAction || this . putAction ) + queryString ) ;
this . _fileUploadXhr ( xhr , file , this . _files [ file . id ] . file ) ;
} ,
_fileUploadHtml5 ( file ) {
var form = new window . FormData ( ) ;
form . append ( this . name , this . _files [ file . id ] . file ) ;
for ( var key in this . request . data ) {
form . append ( key , this . request . data [ key ] ) ;
}
for ( var key in file . request . data ) {
form . append ( key , file . request . data [ key ] ) ;
}
var xhr = new XMLHttpRequest ( ) ;
xhr . open ( 'POST' , file . postAction || this . postAction ) ;
this . _fileUploadXhr ( xhr , file , form ) ;
} ,
_fileUploadHtml4 ( file ) {
_fileUploadHtml4 ( file ) {
var _self = this ;
var _self = this ;
@ -384,7 +544,7 @@ export default {
var form = document . createElement ( 'form' ) ;
var form = document . createElement ( 'form' ) ;
form . action = this . a ;
form . action = file . postAction || this . postA ;
form . name = 'upload-form-' + file . id ;
form . name = 'upload-form-' + file . id ;
form . setAttribute ( 'method' , 'POST' ) ;
form . setAttribute ( 'method' , 'POST' ) ;
form . setAttribute ( 'target' , 'upload-iframe-' + file . id ) ;
form . setAttribute ( 'target' , 'upload-iframe-' + file . id ) ;
git
10 years ago