问题描述
我想通过拖放功能来增强关键表单。我知道,现代的浏览器是能够通过HTML5文件API。
但是我不想立即上传或上传多个文件,我只是寻找重复的功能我们已经发现HTML5文件API需要从表单的其余部分(lame)进行独立的上传。这是不是所需的行为。所以我然后考虑制作一个标准的文件字段,并将其设置为 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'
除非$ .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& amp ;& el.length){for(var i = 0; i< el.length; i ++){addEvent(el [i],type,fn)}}}}})();(function(){var预=使用document.createElement( '前'); pre.id = 视图源;的addEvent(窗口中, '点击',功能(事件){如果(event.target.hash == '#视图源') {if(!document.getElementById('view-source')){var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){如果(this.readyState == 4安培;&安培; this.status == 200){pre.innerHTML = this.responseText.replace(/并[d>] /克,函数(M){返回{ '<' : '&安培; LT;', '>': '&安培; GT;'} [米]}); prettyPrint()}}; document.body.appendChild(预); xhr.open( GET,窗口.location,true); xhr.send()} document.body.className ='view-source'; var sourceTimer = setInterval(function(){if(window.location.hash!='#view-source'){ );}
$ bx = 0
y = -50
x = -200除非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'上传您的简历:'
I want to enhance a critical form with drag and drop functionality. I know that modern browser are capable of this via HTML5 file API.
However I do NOT want an instant upload or to upload multiple files, I am simply looking for duplicate functionality to ye olde fashioned file field.
After doing a-little research I've found the HTML5 file API requires an independent upload from the rest of the form (lame). Which is not the desired behavior.
So I then considered making a standard file field and setting it to position : absolute; visibility : hidden;
and having to follow around the mouse inside the the dropZone via .mousemove
. But this is not possible as the browser window is out of focus while the user grab's their file!
I also attempted to make the file field huge and invisible, but styling the field in this way is not possible.
Any ideas?
Here is what ended up working, I set the vanilla upload field to opacity : 0
and positioned it under the mouse when the mouse is over the visible dropZone div
, via the 'dragover'
event.
'dragover'
overcomes the problem with the browser window being out of focus, and provides .pageX
and .pageY
which I then bound to the invisible file field's .top
and .left
.
However the resulting position of the file field is different on osx vs windows OSs, so a catch had to be put in to position the file field appropriately based on OS. I am pasting my working code below, and I have written a lib that detects browsers, OS and devices. So you will need to find your own way to detect 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: '
这篇关于HTML5拖放文件字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!