这里是结束了工作,我的香草上传字段设置为opacity : 0
和定位它的鼠标下,当鼠标在可见的悬浮窗div
,通过'dragover'
事件。
'dragover'
克服了与浏览器窗口被聚焦的问题,并且提供.pageX
和.pageY
然后我绑定到隐形文件字段的.top
和.left
。
但是,在osx和windows操作系统中,文件字段的结果位置不同,因此必须根据操作系统适当地放置文件字段。我在下面粘贴我的工作代码,并且编写了一个检测浏览器,操作系统和设备的库。所以你需要找到自己的方式来检测osx vs windows。
dropText = $ '#dropText'
jdropZone = $ '#resume'
fileField = $ '#draggy'
unless $.browser.msie
`var addEvent=(function(){if(document.addEventListener){return function(el,type,fn){if(el&&el.nodeName||el===window){el.addEventListener(type,fn,false)}else if(el&&el.length){for(var i=0;i<el.length;i++){addEvent(el[i],type,fn)}}}}else{return function(el,type,fn){if(el&&el.nodeName||el===window){el.attachEvent('on'+type,function(){return fn.call(el,window.event)})}else if(el&&el.length){for(var i=0;i<el.length;i++){addEvent(el[i],type,fn)}}}}})();(function(){var pre=document.createElement('pre');pre.id="view-source";addEvent(window,'click',function(event){if(event.target.hash=='#view-source'){if(!document.getElementById('view-source')){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&&this.status==200){pre.innerHTML=this.responseText.replace(/[<>]/g,function(m){return{'<':'<','>':'>'}[m]});prettyPrint()}};document.body.appendChild(pre);xhr.open("GET",window.location,true);xhr.send()}document.body.className='view-source';var sourceTimer=setInterval(function(){if(window.location.hash!='#view-source'){clearInterval(sourceTimer);document.body.className=''}},200)}})})();`
x = 0
y = -50
x = -200 unless device.mac
x = -130 if device.mac
#alert x
dragover = (e) ->
#e.preventDefault()
fileField.css top : e.pageY+y, left : e.pageX+x
dropZone = document.getElementById 'resume'
addEvent dropZone, 'dragover', dragover
fileField.on 'change', ->
fieldVal = fileField.attr 'value'
fieldVal = fieldVal.split 'fakepath'
fieldVal = fieldVal[fieldVal.length-1]
fieldVal = fieldVal.substr 1, fieldVal.length if $.browser.webkit
dropText.text 'Your Resume: '+fieldVal
else
fileField.css
position : 'static'
opacity : 1
dropText.text 'Upload Your Resume Here: '