html文件拖拽上傳文件
Ⅰ html拖拽效果怎麼實現
<!DOCTYPEHTML>
<html>
<metacharset="UTF-8">
<title>test</title>
<head>
<styletype="text/css">
div{
width:80px;
height:80px;
padding:10px;
margin:10px;
border:1pxsolid#aaaaaa;
}
img{
width:50px;
height:50px;
}
img:hover,
img:active{
width:55px;
height:55px;
}
</style>
<scripttype="text/javascript">
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>請把喵喵拖放到裡面：</h2>
<divondrop="散冊租drop(event)"ondragover="allowDrop(event)"></div>
<divondrop="drop(event)"ondragover="allowDrop(event)"></div>
<imgid="img"src="http://img6.bdstatic.com/img/image/smallpic/chongwu1124.jpg"alt="趕緊拖動我"title="趕緊拖姿清動我"draggable="true"ondragstart="drag(event)"/>
</body>
</html>
設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true" />
拖動什麼 - ondragstart 和 setData()
然後，規定當元素被拖動時，會發生什麼。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被沖兆拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的event.preventDefault() 方法：
event.preventDefault()
進行放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
Ⅱ C# .NET從操作系統直接拖拽文件，並上傳到伺服器。求html5具體代碼
這個和html5 沒有關系， 和瀏覽器有關系， 可以給你兩穗檔嘩個方向，
第一： 如果你是使用的IE系列的瀏覽器， 那麼只有一種方式，編猜行寫一個Active X控制項，這個可以完成，但是比較復雜， 不過windows 的all in one framework裡面有用C#編寫Active X 控制項的例子，你可以參考一下， 如果能用..net 開發的話，這個拖拽功能網上一大片的代碼，自己搜索一下，主蠢絕要是要搞定那個Active X控制項。也可以用C++ 來編寫， 這個有很多的模板。
第二， 如果你是用IE之外的，如火狐， chorme之類的， 你可以參考一下 網路 google 等寫的js代碼， 這些搜索引擎的圖片搜索裡面有一個以圖找圖， 這個是用js實現的， 好像叫做 dragdrop.js的，你打開這個頁面就能看到這個js ，自己下載吧
Ⅲ 如何使用HTML5+JSP實現文件夾拖拽上傳操作，不用php
那你去JSP裡面提問啊，
不用PHP你來PHP模塊提問幹嘛？
Ⅳ htmlinput可以拖拉導入文件嗎
可以。htmlinput用戶桐州是余念可以拖拉導入文件的。input是HTML中的一個輸入框標簽，標簽規定了用戶可以在豎輪困其中輸入數據的輸入欄位。
Ⅳ 如何在你的網站上提供文件供下載
目錄方法1：使用HTML代碼1、如果沒有網頁，先創建一個HTML網頁。2、在伺服器上打開網頁和文件所在的文件夾。3、上傳你想要連接的文件。4、在代碼編輯器中打開你想要添加鏈接的頁面。5、在網頁上找到你想要添加鏈接的位置。6、添加鏈接代碼。7、創建下載按鈕。8、重命名下載文件。9、保存更改。方法2：使用WordPress編輯器1、在WordPress網站編輯器中打開網頁。2、把游標放到出現鏈接的位置。3、點擊「添加多媒體」按鈕。4、點擊「上傳文件」選項卡蠢讓，將文件拖拽到窗口中。5、添加文件描述。6、點擊「插入到帖子/頁面中」按鈕，將下載鏈接插入到游標所在位置。方法3：使用「Weebly」編輯器1、在Weebly編輯器中打開網頁。2、選擇你想要轉換為鏈接的文本或對象。3、點擊「鏈接」按鈕。4、選擇「文件」，然後點擊「上傳文件」。5、選擇目標文件。6、發布網頁，查看鏈接。方法4：使用「Wix」編輯器1、在Wix編輯器中打開網站。2、選擇你想要轉換為鏈接的文本或圖片。3、把選中的對象變成鏈接。4、從鏈接選項列表裡選擇「文檔」。5、點擊「選擇文件」按鈕，打開文件上傳程序。6、將文件拖拽到上傳窗口。7、發布網站。方法5：使用「GoDaddy」1、在GoDaddy網站編輯器中打開網頁。2、選擇你想要轉換為鏈接的文本或對象。3、將選中的文本或對象創建為鏈接。4、點擊「鏈接（URL）」下方的紅色箭頭，選擇「上傳」。5、點擊「瀏覽」按鈕，找到你想要上傳的文件。6、上傳完文件後，點擊「插入」。7、點擊「保存」按鈕創建鏈接。8、點擊「發布」保存網頁更改。訪客都希望網站的創建者能夠提供文件的下載鏈接。事實上，創建者們會通過多種方式來滿足用戶這一需求。許多網站創建和編輯工具都能夠在你上傳文件的同時創建文件鏈接，讓文件變得可供下載，比如GoDaddy、WordPress和Weebly。如果使用「scratch」創建網站，還可以使用簡單的HTML網頁代碼來為存儲在伺服器上的文件創建下載鏈接。
方法1：使用HTML代碼
1、如果沒有網頁，先創建一個HTML網頁。你需要向網頁中添加文件的下載鏈接。因此，你需要擁有一個網站。如果沒有創建好的網站，可以創建一個簡單的網頁來測試下載鏈接。查閱用HTML創建一個簡單網頁，了解詳細信息。
2、在伺服器上打開網頁和文件所在的文件夾。將文件放到網頁文件所在的文件夾，這是最簡單的鏈接方式。使用文件管理器控制面板或FTP程序里的文件瀏覽器，進入網頁文件所在的文件夾，然後准備向網頁添加鏈接。由於之前曾向伺服器上傳過網頁文件，因此，FTP客戶端應該已經連接到網頁伺服器。如果沒有連接伺服器，查閱如何使用FTP，了解將FTP客戶端連接到伺服器的方法。
如果網站伺服器有在線控制面板，則可以通過網頁管理器界面直接訪問伺服器文件。你需要以管理員身份登錄管理器，進入控制面板後，選擇「文件管理器」選項。
如果使用網站創建工具來創建網站，比如WordPress、Weebly或Wix，查閱下方對應於各平台的創建方法。
3、上傳你想要連接的文件。你可以上傳多種類型的文件，包括PDF、ZIP等文件。注意，有些伺服器會限制上傳文件的大小，較大的文件會佔用大部分網速。有些瀏覽器會阻止訪客下載EXE或DLL文件，以攔截惡意程序和廣告軟體。如果想要使用FTP程序上傳文件，將文件拖拽到FTP窗口中你想要上傳到的文件夾中。接著系統會立刻開始上傳文件。上傳速度會稍慢於下載速度，幾分鍾後才會完成上傳。
如果使用文件管理器的虛擬控制面板，點擊窗口頂部的「上傳」按鈕，瀏覽計算機，找到你想要上傳的文件。較大的文件需要橘派花一些時間才能上傳到伺服器。
4、在代碼編輯器中打開你想要添加鏈接的頁面。上傳好文件後，你需要在網頁上添加鏈接。打開你想要添加鏈接的網頁文件。在文件管理器控制面板中，雙擊HTML文件，在內置的頁面編輯器中打開它。如果使用FTP，右鍵點擊HTML文件，使用「打開方式」選項來選擇在代碼編輯器或文本編輯器中將它打開。
5、在網頁上找到你想要添加鏈接的位置。將游標放到想要插入下載鏈接的位置，可以是正文的一個段落，也可以是頁面底部或其它位置。
6、添加鏈接代碼。輸入下載鏈接的網頁代碼。這樣，帶伍局用戶在點擊鏈接後，就會立刻開始下載。如果下載文件位於HTML文件所在的文件夾，那麼你需要使用文件名稱和擴展名。如果位於不同的文件夾，還需要添加文件夾結構。
<!-- Uploaded file in same location as HTML file --><a href="examplefile.pdf" download>Link text</a><!-- Uploaded file in different location than HTML file --><a href="/path/to/file/examplefile2.jpg" download>Link text</a><a> download屬性不適用於Safari、IE或Opera Mini瀏覽器。使用這些瀏覽器的用戶會在新頁面中打開文件，並需要手動保存它。
7、創建下載按鈕。你可以使用圖片，而不是文本來創建下載鏈接。這需要使用網頁伺服器上已有的按鈕圖片。
<a href="examplefile.pdf" download><img src="/images/downloadbutton.jpg"></a>
8、重命名下載文件。如果確定<a> download屬性，可以在他人下載文件時更改文件的名稱。這樣能方便用戶識別下載的文件。
<a href="083116sal_rep.pdf" download="August 31 2016 Sales Report">Download the report</a>
9、保存更改。更改完代碼後，保存HTML文件，如果需要，可以重新上傳它。這時候，你應該能夠在網站上看到新的下載按鈕或鏈接。
方法2：使用WordPress編輯器
1、在WordPress網站編輯器中打開網頁。如果使用WordPress來管理和創建網站，那麼可以用程序內置工具添加鏈接。使用管理員賬戶登錄「WordPress」。
2、把游標放到出現鏈接的位置。可以是正文的中央，也可以創建新的一行。
3、點擊「添加多媒體」按鈕。它位於頁面頂部的工具欄里。
4、點擊「上傳文件」選項卡，將文件拖拽到窗口中。你可以上傳各種類型的文件，但是，「WordPress」程序會根據你的賬戶類型限制文件大小。由於大部分上傳速度比下載速度更慢，因此，上傳文件需要花費一段時間。
5、添加文件描述。在「添加多媒體」窗口的文件下方輸入文件描述。這段文本會顯示為下載鏈接文本。
6、點擊「插入到帖子/頁面中」按鈕，將下載鏈接插入到游標所在位置。注意，它會連接到附件頁面，而不是實際的文件。這就是WordPress程序的缺陷。
方法3：使用「Weebly」編輯器
1、在Weebly編輯器中打開網頁。登錄Weebly網站，在編輯器中打開網頁。
2、選擇你想要轉換為鏈接的文本或對象。你可以高亮標記文本或選擇一張圖片，把它變成文件的下載鏈接。
3、點擊「鏈接」按鈕。選中文本後，找到鏈接按鈕。它看上去像是一個鏈條，位於文本編輯器頂部。選中圖片後，點擊圖片控制面板里的「鏈接」。
4、選擇「文件」，然後點擊「上傳文件」。打開文件瀏覽器。
5、選擇目標文件。選中後，開始上傳文件。大眾用戶最多上傳5MB的文件，會員可以上傳100MB的文件。
6、發布網頁，查看鏈接。上傳完文件後，就可以使用鏈接了。點擊「發布」按鈕，保存網頁更改。此時，訪客可以點擊鏈接，下載文件了。
方法4：使用「Wix」編輯器
1、在Wix編輯器中打開網站。如果使用Wix創建和管理網站，先登錄網站，在編輯器中打開網頁。
2、選擇你想要轉換為鏈接的文本或圖片。你可以將網頁上的文本或圖片創建為下載鏈接。
3、把選中的對象變成鏈接。文本和圖片的操作有點差異：文本 - 點擊「文本設置」窗口裡的鏈接按鈕。按鈕看上去像是一個鏈條，這會打開「鏈接」菜單。
圖片 - 在「圖片設置」窗口裡的「點擊圖片」菜單中，選擇「打開鏈接」。點擊「鏈接是做什麼的？」部分里的「添加鏈接」。打開鏈接菜單。
4、從鏈接選項列表裡選擇「文檔」。你可以上傳各種各樣的文檔文件。
5、點擊「選擇文件」按鈕，打開文件上傳程序。
6、將文件拖拽到上傳窗口。你只能上傳DOC、PDF、PPT、XLS和ODT文件，以及它們的子格式文件。文件大小在15MB以內。
7、發布網站。上傳文件後，發布網站。點擊右上角的「發布」按鈕，保存網頁更改，測試下載鏈接。
方法5：使用「GoDaddy」
1、在GoDaddy網站編輯器中打開網頁。 如果使用GoDaddy網站創建網頁，先登錄網站，在編輯器中打開網頁。
2、選擇你想要轉換為鏈接的文本或對象。你可以將網頁上的任何對象創建為下載鏈接，包括文本框中的文本。如果想要創建下載按鈕，點擊左側菜單里的「按鈕」選項，插入按鈕。
3、將選中的文本或對象創建為鏈接。如果選中了一個物體，點擊「設置」按鈕打開菜單。如果選中文本，點擊文本格式工具里的「鏈接」按鈕，按鈕的圖標像是一個鏈條。
4、點擊「鏈接（URL）」下方的紅色箭頭，選擇「上傳」。這允許你選擇想要上傳的文件。
5、點擊「瀏覽」按鈕，找到你想要上傳的文件。文件的大小最大為30MB。你無法上傳HTML、PHP、EXE、DLL和其它可能有危險的文件類型。
6、上傳完文件後，點擊「插入」。完成上傳後，窗口中文件的旁邊會出現一個對勾。
7、點擊「保存」按鈕創建鏈接。點擊「保存」，將創建的文本或對象鏈接應用到文件。
8、點擊「發布」保存網頁更改。創建鏈接後，訪客可以點擊鏈接下載文件。
Ⅵ html5拖拽圖片上傳，怎麼獲得圖片原始尺寸
用後台語言去獲取不就可以了。為什麼一定要在前端來獲取圖片原始大小呢？即使你要在前端實用，比如PHP獲取到了以後還是可以通過變數傳遞給前端的。至於PHP怎麼獲取圖片原始大小這個網上很容易找到資料！
Ⅶ sublime text 3寫的html文件如何上傳到伺服器
在FTP軟體中，選中文件，選擇編輯方式，選擇sublime編輯。
編輯後保存，自動上傳到伺服器。
推薦使用Transmit
Ⅷ HTML5拖拽事件
圖片自帶拖拽功能
其他元素可設置draggable屬性
例子:
https://element.eleme.cn/#/zh-CN ---》組件（菜單）---》Tree樹形控制項---》可拖拽節點（右側）
只作為了解, 因為現在火狐已經沒有兼容問題
火狐瀏覽器下需設置dataTransfer對象才可以拖拽除圖片外的其他標簽
火狐在沒有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以
dataTransfer 是 拖拽事件對象的屬性
，參考上面的例子
通過FileReader對象可以讀取本地存儲的文件信息, 使用File對象 指定要讀取的文件數據
HTML5 新增的內置構造函數,可以讀取本地文件的信息
性能低,沒有必要吧這些字元串渲染到頁面中
讀取拖入的圖片信息，並顯示在頁面上
多文件的拖入上傳
利用FileReader讀取信息
Ⅸ 怎樣用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 圖片上傳 可收縮 拖拽
可以參腔睜考chrome小樂圖搏扒客擴展的截圖功能，支持粘貼剪貼板圖片、拖拽圖片、或者粘貼圖片網址上傳，是通基圓昌過html5 file reader實現的。