javascript - HTML5 拖放文件字段

Question

我想通过拖放功能增强关键表单。我知道现代浏览器能够通过 HTML5 文件 API 实现此目的。

但是，我不想立即上传或上传多个文件，我只是在寻找旧式文件字段的重复功能。

经过一些研究后，我发现 HTML5 文件 API 需要从表单的其余部分独立上传(蹩脚)。这不是理想的行为。

因此，我考虑制作一个标准文件字段并将其设置为 position :absolute;可见性:隐藏；并且必须通过.mousemove在dropZone内跟随鼠标。但这是不可能的，因为当用户抓取文件时浏览器窗口失去焦点!

我还尝试使文件字段变得巨大且不可见，但以这种方式设置字段样式是不可能的。

有什么想法吗？

Answer 1

这就是最终的工作结果，我将普通上传字段设置为 opacity : 0 并在鼠标位于可见 dropZone div 上方时将其放置在鼠标下方，通过 'dragover' 事件。

'dragover' 克服了浏览器窗口失焦的问题，并提供了我随后绑定(bind)的 .pageX 和 .pageY到不可见文件字段的 .top 和 .left。

但是，文件字段的结果位置在 osx 与 windows 操作系统上是不同的，因此必须添加一个 catch 来根据操作系统适本地定位文件字段。我将我的工作代码粘贴在下面，并且我编写了一个检测浏览器、操作系统和设备的库。因此，您需要找到自己的方法来检测 osx 与 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{'<':'&lt;','>':'&gt;'}[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: '