HTML5拖放文件字段 [英] HTML5 drag and drop file field

问题描述

我想通过拖放功能来增强关键表单。我知道，现代的浏览器是能够通过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{'<':'&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: '

这篇关于HTML5拖放文件字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！