拖拽上傳檔案的web客戶端實現

阿新 • • 發佈：2018-12-23

1. html 程式碼

準備一個jquery.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        #drag-frame {
            width: 500px;
            height: 400px;
            border: dashed 4px gray;
            border-radius 
: 10px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script src="js/drag.js"></script>
    <body>
        <div id="drag-frame" class="drag-frame">
            <table class="table">
                <tbody class="tbody"></tbody> 

            </table>
        </div>
        <input type="button" id="clear" value="清空" />
    </body>

</html>

2. js程式碼

$(() => {
    //新增拖拽事件
    var dz = document.getElementById('drag-frame');
    dz.ondragover = function(ev) {
        //阻止瀏覽器預設開啟檔案的操作
        ev.preventDefault();
        // 
拖入檔案後邊框顏色變紅
        this.style.borderColor = 'red';
    }

    dz.ondragleave = function() {
        //恢復邊框顏色
        this.style.borderColor = 'gray';
    }
    dz.ondrop = function(ev) {
        ev.preventDefault();
        //恢復邊框顏色
        this.style.borderColor = 'gray';
        //阻止瀏覽器預設開啟檔案的操作

        var drag_files = ev.dataTransfer.files;
        var frag = document.createDocumentFragment(); //為了減少js修改dom樹的頻度，先建立一個fragment，然後在fragment裡操作
        var tr, time, size;
        for(var file of drag_files) {
            tr = document.createElement('tr');
            //獲取檔案大小
            size = Math.round(file.size * 100 / 1024) / 100 + 'KB';
            //獲取格式化的修改時間
            time = file.lastModifiedDate.toLocaleDateString() + ' ' + file.lastModifiedDate.toTimeString().split(' ')[0];
            tr.innerHTML = '<td>' + file.name + '</td><td>' + time + '</td><td>' + size + '</td><td>刪除</td>';
            console.log(size + ' ' + time);
            frag.appendChild(tr); //?
            dragFiles.set(file.name,file);
        }
        this.childNodes[1].childNodes[1].appendChild(frag);
        //為什麼是‘1'？文件裡幾乎每一樣東西都是一個節點，甚至連空格和換行符都會被解釋成節點。而且都包含在childNodes屬性所返回的陣列中.不同於jade模板
    }
    // 用事件委託的方法為‘刪除'新增點選事件，使用jquery中的on方法
    $(".tbody").on('click', 'tr td:last-child', function() {
        //刪除拖拽框已有的檔案
        var key = $(this).prev().prev().prev().text();
        console.log(key);
        dragFiles.delete(key)
        $(this).parent().remove();
    });

    $("#clear").click(clearAll);
});
// 使用map的好處是可以去重
let dragFiles = new Map();

//清空所有內容
function clearAll() {
    $("#drag-frame tbody").html('');

    dragFiles.clear();
}

/**
 * 獲取FormData物件
 */
function getFormData() {
    var formDate = new FormData();
    dragFiles.forEach(function(item) {
        formDate.append("files",item);
    })

    return formDate;
}

3. 效果如圖

這裡寫圖片描述

4. 上傳

使用getFormData()獲取 FormData 物件後，剩下的操作可以參照 springMVC檔案上傳

拖拽上傳檔案的web客戶端實現

1. html 程式碼準備一個jquery.js <!DOCTYPE html> <html> <head> <meta ch

基於springMVC+AJAX+bootstraptable實現上傳檔案和客戶端分頁

1 首先看一下上傳表格程式碼，主要程式碼如下： <form method="post" enctype="multipart/form-data" id="orderform"> <div class="col-md-6 col-sm-12"&

HTML5拖拽上傳檔案,chrome資料夾上傳

最近被安排做一個拖拽上傳和資料夾上傳的功能，不考慮相容性，哈哈這個可以用HTML5實現。這裡就不仔細學習HTML5，我只是想找例子，然後偷過來用，至於原理邊用邊學。仔細看完估計原理你也會懂的。可是並不是那麼一帆風順，故事發生了：資料夾上傳的時候，如果資料夾內還有資料夾上面的那個例子

實現拖拽上傳檔案的一款小控制元件——dropzone

因為專注所以專業。很多小巧的東西乍一看很不起眼，卻在特定的領域表現不俗，就是因為集中了熱情。 dropzone就是這樣一款小控制元件，實現拖拽上傳。它不依賴於其它像jquery等JS庫，而且支援多方面的定製。使用Dropzone所需要的準備工作很簡

使用SecureCRT實現拖拽上傳檔案到linux

第一種,只能上傳linux壓縮包執行這個命令安裝一個外掛就可以直接把壓縮檔案拖拽到linux視窗了:yum -y install lrzsz 拖拽到視窗的時候會彈出個小框,選最後一個第二種,資料夾什麼的也可以直接上傳上來然後直接從window的資料

FastDFS的配置、部署與API使用解讀（2）以位元組方式上傳檔案的客戶端程式碼

本文來自詩商·柳驚鴻 Poechant CSDN部落格，轉載請註明源地址：FastDFS的配置、部署與API使用解讀（2）上傳檔案到FastDFS分散式檔案系統的客戶端程式碼在閱讀本文之前，請您先通過《FastDFS的配置、部署與API使用解讀（1）Get Start

Thinkphp拖拽上傳檔案-使用webuploader外掛（自己改動了一些地方）——分片上傳

html頁面： <!DOCTYPE html> <html class="js cssanimations"> <head> <meta http-equiv="Content-Type" content="text

Thinkphp拖拽上傳檔案-使用webuploader外掛（自己稍微改動了一些地方）——不切片上傳

在拖拽或選擇上傳會遇到上傳檔案大小限制問題——如果檔案很大，可以做切片，也可以不做切片，如果不做切片，檔案太大，可能會上傳失敗，因為“WAMP資料庫上傳檔案的大小及上傳時間會受限制”，可以進行一下操作：檔案大小限制問題轉載連結：http://blog.csdn.net/l

前端實現檔案下載和拖拽上傳

蘇格團隊作者：WDZ 交流QQ群：855833773 歡迎加入我們的團隊，微信聯絡方式：foreverpx_cjl 筆者在業務中碰到了需要下載示例和拖拽上傳並實現進度條的功能，針對過程中遇到的問題，筆者進行了相應的總結。需求頁面中增加下載示例按鈕

Python socket上傳檔案的服務端和客戶端實現

socket官方文件：https://docs.python.org/2/library/socket.html socket中文詳細介紹：http://blog.csdn.net/rebelqsp/article/details/22109925 檢視某埠是否被佔用(如6666埠)：s

HTML5應用之檔案拖拽上傳

HTML 我們在頁面中放置一個拖拽區域#drop_area，即接收拖拽的區域，#preview用來預覽拖拽上傳的圖片資訊。 <div id="drop_area">將圖片拖拽到此區域</div> <div id="preview"></div> Java

使用AJAX實現檔案拖拽上傳功能詳解

概述對於微雲、百度雲等網盤提供的檔案儲存服務而言，檔案上傳是一個重要功能。檔案上傳的方式主要有兩種：二進位制資料上傳、表單上傳。本文會詳細解析表單上傳的協議規範，前端上傳檔案的兩種方式：對話方塊選擇方式、拖拽選擇方式，服務端接收上傳的檔案以及檔案上傳

Bootstrap 實現檔案的本地拖拽上傳

程式碼： uploadfile.html <!DOCTYPE html> <html> <head> <title>檔案上傳</title> <meta charset="utf-8"/&g

前端頁面檔案拖拽上傳模組html/css/js程式碼示例

最近給衛生局做一個表格上傳/視覺化系統，算是小有成果。今天把專案中的檔案拖拽上傳模組分離出來，做了一個獨立的小demo,並把相關程式碼打包上傳到了我的github中，為了其他學習者和開發者提供拙見。由於程式碼中我的註釋很詳盡，所以具體邏輯實現及不介紹

ASP.NET MVC檔案上傳、檔案拖拽上傳demo

Introduction In this article I am explaiing three ways to upload image from an ASP.NET MVC web application to server and accessing those back to display

js實現檔案拖拽上傳並顯示待上傳的檔案列表

首先實現html頁面的內容:<body> <div name="single" style="text-align: center; "> <A class=btn_addPic href="javascript:void

用Java實現簡單的檔案上傳伺服器和客戶端

/** * 使用TCP協議實現上傳功能的伺服器端 * 思路： * 新建ServerSocket * 等待客戶端連線 * 連線上後開啟子執行緒，把連接獲取的Socket傳給子執行緒 * 迴圈進行 * @author yajun * */ public class UploadServer {

Java實現拖拽上傳

itl filename 表單元 ava 100% ondrag nco write obj 原文：http://www.open-open.com/code/view/1437358795584 在項目開發中由於實際需求，需要開發拖拽上傳的功能，ok！先看效果圖

拖拽上傳功能

else if dev 個數 enum xhr html5 ont align ger 拖拽上傳功能旨在實現拖拽文件或者圖片上傳到你想要保存到的地方。此處上傳的是xml文件，可以在裏面對文件類型進行限制；聲明：現在的ie瀏覽器9及以下的版本並不支持該方法實現拖拽上傳，如果

ajax2.0之拖拽上傳

mage 上傳 margin || tee tlist text fun spa index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">

拖拽上傳檔案的web客戶端實現

1. html 程式碼

2. js程式碼

3. 效果如圖

4. 上傳

相關推薦