HTML5拖放文件字段

我想通過拖放功能來增強關鍵窗體。我知道現代瀏覽器能夠通過HTML5文件API實現這一點。HTML5拖放文件字段

但是，我不想立即上傳或上傳多個文件，我只是尋找重複的功能，以老式的文件領域。

經過一番研究，我發現HTML5文件API需要從表單的其餘部分（跛腳）進行獨立上載。這不是期望的行爲。

因此，我考慮製作一個標準文件字段並將其設置爲position : absolute; visibility : hidden;，並且必須通過.mousemove來關注dropZone中的鼠標。但這是不可能的，因爲當用戶抓住他們的文件時，瀏覽器窗口沒有聚焦！

我也試圖使文件字段巨大和不可見，但以這種方式設置字段是不可能的。

任何想法？

來源

2012-06-02 Fresheyeball

這裏是結束了工作，我的香草上傳字段設置爲opacity : 0和定位它的鼠標下，當鼠標在可見的懸浮窗div，通過'dragover'事件。

'dragover'克服了與瀏覽器窗口被聚焦的問題，並且提供.pageX和.pageY然後我綁定到隱形文件字段的.top和.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<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: '

來源

2012-06-05 19:55:57 Fresheyeball

HTML5拖放文件字段

回答

相關問題