HTML5拖放文件字段
HTML5 drag and drop file field
我想通过拖放功能增强关键表单。我知道现代浏览器能够通过HTML5文件API做到这一点。
但是,我不想要即时上传或上传多个文件,我只是在寻找旧式文件字段的重复功能。
经过一些研究,我发现HTML5文件API需要从表单的其余部分独立上传(蹩脚)。这不是所需的行为。
因此,我随后考虑制作一个标准文件字段并将其设置为 position : absolute; visibility : hidden;
,并且必须通过 .mousemove
跟随 dropZone 内的鼠标。但这是不可能的,因为当用户抓取他们的文件时,浏览器窗口失焦了!
我还尝试使文件字段变得巨大且不可见,但以这种方式设置字段样式是不可能的。
有什么想法吗?
这是最终工作的方法,我将原版上传字段设置为 opacity : 0
,并在鼠标悬停在可见的 dropZone div
上时将其放置在鼠标下方,通过 'dragover'
事件。
'dragover'
克服了浏览器窗口失焦的问题,并提供了.pageX
和.pageY
,然后我将其绑定到不可见文件字段的.top
和.left
。
但是,在 osx 和 Windows 操作系统上,文件字段的结果位置是不同的,因此必须根据操作系统适当地放置文件字段。我正在下面粘贴我的工作代码,并且我编写了一个检测浏览器、操作系统和设备的库。因此,您需要找到自己的方法来检测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{'<':'<','>':'>'}[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: '
相关文章:
- 处理字段中带有换行符的csv文件-node.js
- HTML5要求隐藏文件字段-反馈位置
- jquery形成多文件输入字段Value()
- 调用JavaScript函数后,文件上载字段重置
- 通过程序从多个输入字段上传多个文件-blueimp jquery fileupload
- 有没有什么方法可以通过输入字段(type=file)来找出选择了多少个文件
- Javascript 单击html字段值而不编辑.js文件
- 如何从 json 文件中检索所有字段
- 为什么在下面的场景中,用于存储所选文件名和文件路径的隐藏输入字段没有在表单上生成
- 如何使用ian:accounts-ui-botstrap-3根据Meteor中的用户输入设置配置文件字段值
- 如何从输入字段在浏览器中显示PDF文件
- 具有输入类型文件字段的语义UI重置表单
- Chrome扩展:将下载的文件移动到输入字段
- 已从'上传文件;文件'img字段中未显示类型输入字段
- 添加选项以使用 javascript 从 json 文件中选择字段
- 验证数组文件字段的表单提交
- 如何将base64写入模型's文件字段
- 如何在jquery中清除输入文件字段
- 使用jquery验证忽略字段文件
- 如何从phonegap的html5输入字段文件对象获取路径