html拖拽文件
Ⅰ 跪求html、css、jQuery或者插件之類的實現組件拖拽形成樹狀圖可以保存成文檔的。
看一下ace吧 ，我記得裡面有這種組件 ，
但是功能還是要自己寫 ，你可以把右邊的結構序列化發送到服務端 ，由服務端生成文檔和下載鏈接。
拖拉樹狀圖什麼的可以用jqueryui ，ace就不要用了 ，這種自由化比較高的應用還是自己寫組件比較好。
Ⅱ 滑鼠拖動文件是移動還是復制,如何設置
不需要設置，只需要在不同的分區拖動文件的時候按住「Shift」鍵即可，將其由復制切換為移動，但是同一個分區拖動文件默認是「移動」，所以不需要按住「Shift」,直接拖動即可。
1.以下圖為例，在不同分區之間拖動文件，默認為「復制到」；
Ⅲ 拖拽結束後追加的HTML怎麼才能執行之前的拖拽方法
添加2個監視器
this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandle);
this.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandle);
protected function mouseDownHandle(event:MouseEvent):void
{
//停止
//stop();
//拖拽代碼
}
protected function mouseUpHandle(event:MouseEvent):void
{
//開始
//gotoandplay(_currentframe);
}
我用的是FLASH BUILDER所以，不太了解開始播放和停止播放的具體代碼，不過這個應該簡單。
打注釋的代碼不一定正確。不過思路是對的。你自己琢磨下吧。
Ⅳ 怎樣用html5實現拖拽上傳文件
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然後獲取本地圖片信息，實現預覽，最後上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實現預覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
Ⅳ 如何設置 html5 圖片拖放拖放到一個div中的位置
html5的拖拽事件中的dataTransfer里的files存儲文件信息，然後創建一個img，加到div中就行
Ⅵ 如何使用HTML5進行文件拖放
如何使用HTML5進行文件拖放
1.實現將文件拖放到頁面元素上
2.在JavaScript中分析被拖放的文件
3.在客戶端上載入和解析文件
4.使用XMLHttpRequest2將文件非同步上傳到伺服器
5.上傳時，顯示圖形進度條
6.使用進程增強( progressive enhancement)以確保文件上傳表單在所有瀏覽器正常工作
7.純JavaScript代碼，不使用其它庫。
Ⅶ html5 拖拽上傳視頻到指定目錄下。
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然後獲取本地圖片信息，實現預覽，最後上傳。
$(function(){
接上部分
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實現預覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview")(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
Ⅷ html5拖拽圖片上傳，怎麼獲得圖片原始尺寸
拖拽的過程就不說了，這里主要說一下如何在前端獲取到圖片的相關信息。
html5里有一個的全局變數，用來讀取本地文件，比如txt，img等，下面是一個簡單的代碼。
functioncheckFile(files){
varfile=files[0];
varreader=newFileReader();
//show表示<divid='show'></div>，用來展示圖片預覽的
if(!/image/w+/.test(file.type)){
show.innerHTML="請確保文件為圖像類型";
returnfalse;
}
//onload是非同步操作
reader.onload=function(e){
show.innerHTML='<imgsrc="'+e.target.result+'"alt="img">';
}
reader.readAsDataURL(file);
}這樣就能夠在不上傳到伺服器的前提下預覽圖片。當然，這個問題的重點是獲取圖片的原始尺寸，html5里還提供了兩個變數來獲取：naturalWidth和naturalHeight，這兩個分別來獲取圖片的原始寬度和原始高度。
在上面的例子中，就能通過下面的方式獲取到：
varwidth=e.target.naturalWidth;
varheight=e.target.naturalHeight;
還有一種情況就是，如果已經存在頁面里的圖片，怎麼獲取到原始尺寸呢，可以這樣：
varimg=document.getElementsByTagName('img')[0];//獲取到圖片
varwidth=img.naturalWidth;
varheight=img.naturalHeight;
Ⅸ 什麼是HTML5拖放
拖放是一種常見的特性，即抓取對象以後拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
Ⅹ 如何使用HTML5實現文件拖放
把文件從桌面拖拽到瀏覽器是Web應用程序集成的最終目標之一。本教程共四篇文章(本文是第一篇)，主要介紹了：
1.實現將文件拖放到頁面元素上
2.在JavaScript中分析被拖放的文件
3.在客戶端上載入和解析文件
4.使用XMLHttpRequest2將文件非同步上傳到伺服器
5.上傳時，顯示圖形進度條
6.使用進程增強( progressive enhancement)以確保文件上傳表單在所有瀏覽器正常工作
7.純JavaScript代碼，不使用其它庫。
咻，開始吧！
糟糕的瀏覽器支持
在開始之前說明一下，這個教程使用了一些HTML5的最新技術，可能以後會被修正。目前代碼可以正常工作，但是很可能隨著API的變化或者瀏覽器升級而受到影響。
§Firefox和Chrome的最新版本支持所有的功能並且可以完美運行。
§Opera可以用JavaScript解析文件，但未實現拖放文件和XMLHttpRequest2上傳。
§IE瀏覽器和桌面版本的Safari不支持所有的API。
§蘋果已禁用Safari瀏覽器的iPhone和iPad版本的HTML文件上傳表單。有誰知道為什麼嗎？
最後，請注意我的代碼只是演示了基本概念，幾乎沒有錯誤檢查，因此需要進行修改以適應你的工作需要。
HTML和CSS
這是我們的帶有文件輸入類型的標准表單。唯一的HTML5特性是「multiple」屬性，它允許用戶選擇任意數量的文件。
我們將上傳文件到運行PHP的伺服器上，但是無論你在伺服器端使用什麼技術，代碼是大致相同的。隱藏的MAX_FILE_SIZE值指定為300,000個位元組，這是PHP使用的，但我們還會在瀏覽器端用它進行檢查，以防止大文件上傳。
#filedrag元素將被用作接收拖放文件的位置。元素是通過CSS隱藏的，但如果瀏覽器支持拖拽的話，它會在JavaScript中被顯示：
我們還定義了一個.hover類，當用戶拖動文件到相應區域元素時，改變元素的顯示風格。瀏覽器不支持在那種情況下的:hover風格，但當事件觸發時，我們可以用JavaScript添加類。
文件操作API
W3C 文件操作API
提供了一些對象，我們使用了：
§FileList：代表選定的文件數組。
§File：代表一個單獨的文件。
§FileReader：支持JavaScript的客戶端讀取文件數據的介面。
Javascript事件
是時候處理JavaScript代碼了。我們不使用任何JavaScript庫，為了節省時間，我們將創建一個輔助函數返回元素的ID和輸出狀態消息：
我們將在Init()函數里檢查文件操作API是否有效:
Init()函數說明:
1.給文件輸入元素設置一個「change」事件監聽器。
2.顯示#filedrag元素。
3.設置「dragover」和「dragleave」事件監聽器，以改變的＃filedrag元素的風格。
4.給#filedrag元素設置一個「drop」的事件監聽器。
5.隱藏表單的提交按鈕 - 它不是必需的，因為當文件被選中時我們將進行分析和上傳，而不是提交表單。
或者，當瀏覽器支持文件拖動時，你可以隱藏文件輸入元素。就個人而言，我更願意同時提供兩種選擇，因為拖放實際上會帶來實用性的問題。
XMLHttpRequest.upload方法檢查防止在Opera中的問題。瀏覽器支持File，FileList和FileReader，但不支持拖放事件或XMLHttpRequest2。因此，它可以顯示文件信息，但我們不希望顯示#filedrag的元素或刪除submit按鈕。
改變文件拖放風格
很少人在瀏覽器中進行過文件拖放。事實上，經驗豐富的網路用戶也不太考慮是否可行。因此，我們使用了標有「drop files here」的元素。當文件拖到#filedrag上時，我們還通過改變元素的風格來進行顯示。
分析放下或被選中的文件
無論是使用「Browse」按鈕來選中一個或多個文件，或者將文件拖放到拖#filedrag的位置上，我們使用的的相同FileSelectHandler()函數來進行處理：
函數說明：
1.調用FileDragHover()刪除hover風格和取消瀏覽器的事件。這是必不可少的，否則瀏覽器可能會嘗試顯示該文件。
2.獲取一個FileList對象，無論是從文件輸入框（e.target.files）或#filedrag元素（例如dataTransfer.files）。
3.最後，函數遍歷FileList的所有File對象，並把它作為一個參數傳遞給ParseFile()函數...
該函數輸出的信息是File對象提供的三個主要的只讀屬性：
§.name: 文件名 (不包含文件路徑)。
§.type: MIME類型, 例如 image/jpeg，text/plain等等。
§.size: 文件大小（位元組）.