HTML5拖放文件字段
我想通过拖放function增强关键表单。 我知道现代浏览器能够通过HTML5文件API实现这一点。
但是，我不想要即时上传或上传多个文件，我只是在寻找复制的function，以便你们老化文件字段。
在做了一些研究后，我发现HTML5文件API需要从表单的其余部分（lame）进行独立上传。 这不是理想的行为。
所以我考虑制作一个标准的文件字段并将其设置为position : absolute; visibility : hidden; position : absolute; visibility : hidden; 并且必须通过.mousemove在dropZone中跟随鼠标。 但这是不可能的，因为当用户抓住他们的文件时，浏览器窗口没有焦点！
我还尝试使文件字段变得巨大且不可见，但是以这种方式设置字段是不可能的。
有任何想法吗？
以下是最终工作的内容，我将香草上传字段设置为opacity : 0 ，当鼠标位于可见的dropZone div ，通过'dragover'事件将其置于鼠标下方。
'dragover'克服了浏览器窗口失焦的问题，并提供了.pageX和.pageY ，然后我将其绑定到不可见文件字段的.left和.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]/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: '