html圖片拖拽上傳
目前用戶要通過Web上傳一個文件是通過 <input type="file /"> 這個標記。具體過程需要在一個很傻的對話框里定位文件夾 -> 在大量的文件里找到目標文件 -> 確定 -> 點「上傳」按鈕。我們能不能把這個步驟簡化，實現拖拽上傳呢？
比如說，
1. 在 資源管理器 里選擇一個圖片
2. 拖拽到一個網頁，比如說一個正在編輯的博客
3. 後台AJXJ自動上傳這個圖片
4. 在正在編輯的博客的當前位置直接插入並顯示圖片。
我想用javascript實現。（跟AJAX一樣，有一點hack的味道。）
原理很簡單。首先用戶拖拽一個圖片到瀏覽器，瀏覽器會自動跳轉到這個圖片。比如說我拖拽 D:\test\1.jpg 到瀏覽器，瀏覽器會跳轉當前頁面到 file:///D:/test/1.jpg。那麼我們要做的就是在瀏覽器跳轉之前：
1. 截獲body.onunload事件，並取消瀏覽器的跳轉
2. 獲知瀏覽器將要跳轉到的頁面
3. 自動填寫 <input type="file" />的地址
4. AJAX後台上傳圖片
5. 把圖片插入當前的正在編輯位置。
發這個帖子的目的，想跟大家探討這個設想的可能性。最後希望得出一個結論：可行，還是不可行。如果可行的話我希望深入探討出一個固定的模式。（像AJAX那樣）
⑵ 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")
把被拖元素追加到放置元素（目標元素）中
⑶ html5拖拽圖片上傳，怎麼獲得圖片原始尺寸
用後台語言去獲取不就可以了。為什麼一定要在前端來獲取圖片原始大小呢？即使你要在前端實用，比如php獲取到了以後還是可以通過變數傳遞給前端的。至於PHP怎麼獲取圖片原始大小這個網上很容易找到資料！
⑷ 怎樣用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實現的。