當前位置:首頁 » 文件傳輸 » 拖拽文件上傳
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

拖拽文件上傳

發布時間: 2022-01-27 12:36:59

① 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那樣)

② 如何用拖拽和復制方式上傳附件

您好,很高興為您解答。

網易郵箱對添加郵箱附件的操作性進行了全面升級,升級之後網易郵箱新添「附件拖放、復制/粘貼」的附件上傳新方式。

新功能同時支持兼容:IE、火狐、谷歌瀏覽器、360、遨遊、世界之窗等主流瀏覽器,覆蓋率已達到95%。

【附件拖放】
將附件直接拖放到下圖所示區域,就可以輕松地直接添加附件。

【復制/粘貼】
使用滑鼠右鍵 或 Ctrl+C 復制您需要上傳的文件,在下圖所示區域,使用Ctrl+V進行粘貼,即可將附件添加到郵件中,操作簡單方便。

③ 釘盤能不能拖拽文件上傳

您好,電腦端釘盤支持拖拽上傳,直接從本地拖文件或文件夾到釘盤的界面即可。

④ 怎樣用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);
});

⑤ 用js怎麼實現簡單拖拽文件上傳

拖拽還是挺不錯的一個頁面效果,我個人認為,其生命力在於可以讓用戶自己做一些操作,所謂自定義。例如:
①瀏覽器標簽順序的拖拽切換
現在基本上所有的選項卡式的瀏覽器都有順序拖拽切換的功能,如下圖:

類似的效果我們可以在QQ精要新聞彈出框中看到,見下圖:

②把內容放在自己喜歡的位置上
這個在桌面軟體上見到的最多,比如視頻播放器,Adobe系列軟體(CS3+)等。

⑥ 求助:文件拖拽上傳,全瀏覽器都兼容方法

這種文件拖拽方法都是用HTML5寫的,不可能所有瀏覽器都兼容,我們當時處理的辦法是做成既可以拖拽又可以點擊上傳的模式.可以看一下115網盤怎麼做的,他們就是只有IE8不支持,其他都支持

⑦ 我想在ivx里做個文件分享系統,怎麼實現拖拽上傳文件功能

實現拖拽上傳文件功能不用寫代碼的,有現成的組件可以用,用法不難。下面說一下步驟:

  1. 添加拖拽放置容器

    總結
    需要注意的是拖拽放置容器只是將文件拖拽到了容器內部,具體上傳到伺服器還是要通過文件介面組件的,他只是提供了一種操作模式。另外在細節上,可以在拖拽進入事件下改變容器的背景顏色,然後拖拽離開時再將背景顏色重置為初始狀態。這樣用戶將文件拖進容器區域內會有一個明顯的展示效果的變化,用戶體驗也會更好一些。

    ⑧ 文件拖拽上傳怎麼用

    一般需要按照提示安裝相應的插件,安裝成功後按照提示將你需要上傳的文件拖動到相應的窗口區域,松開滑鼠即可上傳。

    ⑨ Java swing怎麼實現上傳文件並支持拖拽上傳

    你這個復雜了,我稍微說說吧。

    進度條稍微簡單點,你就去看看Oracle的tutorial就行了,記得運用科學(或者不用?)

    拖拽不是一下能寫出來的,我隨便拉了一個例子,你研究下:

    {
    @Override
    publicbooleancanImport(TransferHandler.TransferSupportsupport){
    for(DataFlavorflavor:support.getDataFlavors()){
    if(flavor.isFlavorJavaFileListType()){
    returntrue;
    }
    }
    returnfalse;
    }

    @Override
    @SuppressWarnings("unchecked")
    publicbooleanimportData(TransferHandler.TransferSupportsupport){
    if(!this.canImport(support))
    returnfalse;

    List<File>files;
    try{
    files=(List<File>)support.getTransferable()
    .getTransferData(DataFlavor.javaFileListFlavor);
    }catch(UnsupportedFlavorException|IOExceptionex){
    //shouldneverhappen(orJDKisbuggy)
    returnfalse;
    }

    for(Filefile:files){
    //dosomething...
    }
    returntrue;
    }
    }

    用的時候:

    myComponent.setTransferHandler(newFileDropHandler());

    ⑩ selenium怎麼實現文件拖拽上傳功能

    selenium只能操作瀏覽器的對象,不能操作windows對象
    selenium裡面有頁面元素的拖拽操作
    調用第三方的東東,貌似可以實現文件上傳,這個我也正在研究中

    但是直接將文件托在瀏覽器實現上傳,這個selenium好像還真不行……
    文件本身是屬於windows的