當前位置:首頁 » 文件管理 » html圖片拖拽上傳

html圖片拖拽上傳

發布時間: 2023-06-05 01:11:32

⑴ WEB頁面如何實現拖拽文件夾上傳

目前用戶要通過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實現的。

熱點內容
maven3編譯jdk6項目 發布:2024-10-07 03:19:57 瀏覽:43
緩存的視頻無法剪輯 發布:2024-10-07 03:19:40 瀏覽:88
解壓工具RAR 發布:2024-10-07 02:42:49 瀏覽:352
蘋果網盤解壓 發布:2024-10-07 02:42:49 瀏覽:159
為什麼安卓蘋果手游不互通 發布:2024-10-07 02:31:28 瀏覽:280
如何刪除手機中的游戲緩存 發布:2024-10-07 02:11:28 瀏覽:874
解鎖資料庫用戶 發布:2024-10-07 01:55:54 瀏覽:828
關系資料庫的關鍵字是指 發布:2024-10-07 01:55:54 瀏覽:518
java資料庫date 發布:2024-10-07 01:55:21 瀏覽:459
安卓12如何開通運用許可權 發布:2024-10-07 01:29:54 瀏覽:137