JavaScript实现桌面图标推拽直接上传发布时间：2012-07-27 发布来源：
1、https://groups.google.com/forum/？groups＃!msg/refinery-cms/L_PbN3wCimA/BinrRlj2a54J 任何事物都无法抗拒吞食一切的时候。 学科学，是一口气也松不得的；科学的成绩就是毅力加耐性。<!DOCTYPE html> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ＃filedrag{ display: none; ? font-weight: bold; ? text-align: center; ? padding: 1em 0; ? margin: 1em 0; ? color: ＃555; ? border: 2px dashed ＃555; ? border-radius: 7px; ? cursor: default; ? } ＃filedrag.hover{ color: ＃f00; border-color: ＃f00; border-style: solid; box-shadow: inset 0 3px 4px ＃888; } ＃filedrag{ display: none; ? font-weight: bold; ? text-align: center; ? padding: 1em 0; ? margin: 1em 0; ? color: ＃555; ? border: 2px dashed ＃555; ? border-radius: 7px; ? cursor: default; ? } ＃filedrag.hover{ color: ＃f00; border-color: ＃f00; ? border-style: solid; ? box-shadow: inset 0 3px 4px ＃888; ? } </style>
<script type="text/javascript"> window.onload = function（）{ if （window.File && window.FileList && window.FileReader） { ? Init（）; } // initialize function Init（） { var file = document.getElementById（"file"）， ? filedrag = document.getElementById（"filedrag"）， ? submitbutton =document.getElementById（"submitbutton"）; ? // file ? file.addEventListener（"change"， FileSelectHandler， false）; ? // is XHR2 available？ ? var xhr = new XMLHttpRequest（）; if （xhr.upload） { // file drop filedrag.addEventListener（"dragover"， FileDragHover， false）; ? filedrag.addEventListener（"dragleave"， FileDragHover， false）; ? filedrag.addEventListener（"drop"， FileSelectHandler， false）; ? filedrag.style.display = "block"; ? // remove submit button ? submitbutton.style.display = "none"; ? } } //status output information ? function Output（msg） { ? var m = document.getElementById（"messages"）; ? m.innerHTML = msg + m.innerHTML; ? } function FileDragHover（e） { ? e.stopPropagation（）; e.preventDefault（）; ? e.target.className = （e.type == "dragover" ？ "hover" : ""）; ? } function FileSelectHandler（e） { // cancel event and hover styling FileDragHover（e）; // fetch FileList object ? var files = e.target.files || e.dataTransfer.files; ? // process all File objects ? for （var i = 0， f; f = files[i]; i++） { ? ParseFile（f）; ? } } function ParseFile（file） { ? Output（ ? "<p>File information: <strong>" + file.name + ? "</strong> type: <strong>" + file.type + ? "</strong> size: <strong>" + file.size + ? "</strong> bytes</p>" ? ）; } } </script> </head> <body> <div id="output" class="clearfix"> <ul id="output-listing01"></ul> </div> <form id="upload" action="upload.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>HTML File Upload</legend> ? <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" /> <div> <label for="file">Files to upload:</label> ? <input type="file" id="file" name="file[]" multiple="multiple" /> <div id="filedrag">or drop files here</div> ? </div> <div id="submitbutton"> ? <button type="submit">Upload Files</button> ? </div> </fieldset> </form> <div id="messages"> <p>Status Messages</p> </div>? </body> </html> |
|
|
