0

重要なフォームをドラッグ アンド ドロップ機能で強化したいと考えています。私は、最新のブラウザーが HTML5 ファイル API を介してこれを実行できることを知っています。

ただし、インスタント アップロードや複数のファイルのアップロードは必要ありません。単純に、昔ながらのファイル フィールドに重複する機能を探しているだけです。

少し調査した結果、HTML5 ファイル API には、フォームの残りの部分からの独立したアップロードが必要であることがわかりました (ラメ)。これは望ましい動作ではありません。

そこで、標準のファイル フィールドを作成し、それを に設定してposition : absolute; visibility : hidden;、dropZone 内で を介してマウスを操作することを検討し.mousemoveました。しかし、ユーザーがファイルを取得している間、ブラウザ ウィンドウの焦点が合っていないため、これは不可能です。

また、ファイル フィールドを巨大で非表示にしようとしましたが、この方法でフィールドをスタイリングすることはできません。

何か案は？

4

1 に答える 1

2

これが最終的に機能したものです。イベントを介して、バニラアップロードフィールドをopacity : 0マウスの下に設定し、マウスが表示されているdropZoneの上にあるときに配置しました。div'dragover'

'dragover'ブラウザウィンドウの焦点が合っていないという問題を克服し、それを提供し.pageX、.pageYそれを非表示のファイルフィールドとにバインドし.topます.left。

ただし、結果として得られるファイルフィールドの位置は、osxとWindows OSで異なるため、OSに基づいてファイルフィールドを適切に配置するには、キャッチを入れる必要がありました。以下に作業コードを貼り付けており、ブラウザー、OS、およびデバイスを検出するlibを作成しました。したがって、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{'<':'&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-05T19:55:57.047 に答える