Java實現拖拽上傳

阿新 • • 發佈：2017-06-19

itl filename 表單元 ava 100% ondrag nco write obj

原文：http://www.open-open.com/code/view/1437358795584

在項目開發中由於實際需求，需要開發拖拽上傳的功能，ok！

先看效果圖: 技術分享

jsp上傳前端代碼:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>小夜的傳說最新力作！</title>  
    <style type="text/css">  
    * {  
        padding: 0px;  
        margin: 0px;  
    }  
      
    body {  
        background: #394E48;  
        font 
-size: 14px;  
        font-family: "微軟雅黑";  
    }  
      
    .title {  
        text-align: center;  
        color: #fff;  
        margin-top: 50px;  
    }  
      
    .demo {  
        width: 900px;  
        height: 140px;  
        margin: 50px auto;  
    }  
      
    .drag-area {  
        width:  
100%;  
        height: 100px;  
        border: 3px dashed #fff;  
        text-align: center;  
        line-height: 100px;  
        color: #fff;  
        font-size: 36px;  
        font-weight: 700;  
    }  
      
    }  
    .preview div {  
        width: 195px;  
        overflow: hidden;  
        border: 1px dashed silver;  
        margin 
-top: 10px;  
        float: left;  
        padding: 9px;  
        text-align: center;  
        height: 168px;  
    }  
      
    .preview img {  
        width: 80px;  
        height: 80px;  
    }  
    </style>  
    </head>  
    <body>  
        <h1 class="title">小夜的傳說最新力作！Java實現拖拽上傳！！</h1>  
         <div class="demo">  
            <div class="drag-area" id="upload-area">  
                將圖片拖拽到這裏  
            </div>  
            <!-- 圖片預覽 -->  
            <div id="preview" class="preview"></div>  
         </div>  
    </body>  
    <script type="text/javascript">  
        //1、文件上傳HTML5 通過drag把文件拖拽到瀏覽器的默認事件覆蓋  
        //文件離開  
        document.ondragleave=function(e){  
        e.preventDefault();  
            console.info("文件離開執行了我！！");  
        };  
        //鼠標松開文件  
        document.ondrop=function(e){  
        e.preventDefault();  
            console.info("松開以後執行了我！");  
        };  
        //鼠標移動文件  
        document.ondragover=function(e){  
        e.preventDefault();  
            console.info("文件移動以後執行了我！");  
        };  
          
        function tm_upload(){  
            var img1="";  
            var uploadArea=document.getElementById("upload-area");  
            //2、通過HTML5拖拽事件，ondrop，然後通過拖動區域監聽瀏覽器的drop事件達到文件上傳的目的  
            uploadArea.addEventListener("drop", function(e){  
                e.preventDefault();  
                //3、從事件event中獲取拖拽到瀏覽器的文件信息  
                var fileList=e.dataTransfer.files;  
                for(var i=0;i<fileList.length;i++){  
                    //此處判斷只能上傳圖片  
                    if(fileList[i].type.indexOf("image")!=0){  
                        alert("請上傳圖片");  
                        return;               
                    }  
                    //圖片預覽  這一步需要判斷是什麽瀏覽器  大家自己判斷吧  
                    /*************************************/  
                    img1=window.URL.createObjectURL(fileList[i]);  
                    /*************************************/  
                    var str="<div><img src=‘"+img1+"‘/><p>"+fileList[i].name+"</p></div>";  
                    document.getElementById("preview").innerHTML +=str;  
                      
                    var fileName=fileList[i].name;  
                    console.info(fileName);  
                    var fileSize=fileList[i].size;  
                    console.info(fileSize);  
                    //4、通過XMLHttpRequest上傳文件到服務器  就是一個ajax請求  
                    var xhr=new XMLHttpRequest();  
                    //5、這裏需要先寫好一個data.jsp的上傳文件，當然，你寫成servlet或者是action都可以  
                    xhr.open("post","data.jsp",true);  
                    xhr.setRequestHeader("X-Request-Width", "XMLHttpRequest");  
                    //6、通過HTML5 FormData動態設置表單元素  
                    var formData=new FormData();//動態給表單賦值，傳遞二進制文件  
                    //其實就相當於<input type="file" name="file"/>  
                    formData.append("doc",fileList[i]);  
                    xhr.send(formData);  
                }  
            });  
        }  
        //直接調用  
        tm_upload();  
    </script>  
    </html>

ok，編寫完前臺代碼，在寫後臺，如下:

 <[email protected] import="java.util.UUID"%>  
    <[email protected] import="org.apache.commons.fileupload.FileItem"%>  
    <[email protected] import="java.util.Iterator"%>  
    <[email protected] import="java.util.List"%>  
    <[email protected] import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>  
    <[email protected] import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>  
    <[email protected] import="org.apache.commons.fileupload.FileItemFactory"%>  
    <[email protected] import="java.io.File"%>  
    <%@ page language="java" contentType="text/html; charset=UTF-8"  
        pageEncoding="UTF-8"%>  
    <%  
    /*  
    1、文件上傳:  
      
    */  
    request.setCharacterEncoding("utf-8");  
    response.setCharacterEncoding("utf-8");  
    //獲取文件路徑  
    String strPath=request.getRealPath("/")+"/upload";  
    File file =new File(strPath);  
    if(!file.exists())file.mkdirs();  
    FileItemFactory factory=new DiskFileItemFactory();  
    ServletFileUpload upload=new ServletFileUpload(factory);  
    //從請求對象中獲取文件信息  
    List items= upload.parseRequest(request);  
    if(items!=null){  
        for(int i=0;i<items.size();i++){  
            Iterator iterator=items.iterator();  
            while(iterator.hasNext()){  
            FileItem item=(FileItem)iterator.next();  
            if(item.isFormField()){  
                continue;  
            }else{  
                String fileName=item.getName();  
                Long fileSize=item.getSize();  
                int pos=fileName.indexOf(".");  
                String ext=fileName.substring(pos,fileName.length());     
                fileName=UUID.randomUUID().toString()+ext;  
                File saveFile=new File(strPath,fileName);  
                item.write(saveFile);  
             }  
            }  
        }  
    }  
     %>

ok，至此，就完成拖拽上傳的功能，當然這只是粗略版本，我已將代碼優化為插件可以直接使用了！！

Java實現拖拽上傳

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

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

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

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

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

php + js 實現拖拽上傳以及複製貼上上傳圖片

/**xeditor.js**/ xeditor_config = {basePath:'xeditor/' };//xeditor路徑 (function ($) {//阻止瀏覽器預設行。 $.fn.extend({ "setup": funct

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

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

【前端】js+php實現圖片拖拽上傳

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽圖片上傳</title> </head> <body>

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

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

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

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

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

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

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

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

拖拽上傳功能

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">

Java實現FTP伺服器上傳、下載、下載多個寫入本地、刪除

場景：需要從FTP伺服器一個檔案目錄下down下來所有的檔案，上傳到專案某個目錄下。上傳下載刪除獲取檔案下所有檔案，順便加上獲取到所有檔案進行下載。 package a1; /** * 1----public boolean uploadFile(String path ,Fi

HTML5拖拽上傳

HTML5拖拽上傳／ 2-2 傳統拖拽的簡單實現（指令碼部分）事件中觸發的匿名函式內的引數e代表這個事件。設定一個變數，記錄滑鼠是否按下，判斷滑鼠按下的時候再執行移動的事件（否則滑鼠沒按下的時候一直執行事件，瀏

拖拽上傳

跟著張大神修煉內功其中就有拖拽上傳的demo https://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html 精簡版： https://www.zhangxinxu.com/study/201809

java實現多檔案上傳01

1、html程式碼 <html> <head> <link rel="stylesheet" type="text/css" href="table.css" /> <link rel="stylesheet" type="text/css"

java實現多檔案上傳至本地伺服器

博主最近在做一個內網專案，內部可以訪問外部資料，但是外部訪問不了內部資料，這也就造成了可能檔案無法上傳，所以博主另闢蹊徑，在本地伺服器上建立一個資料夾專門用來儲存上傳資料。環境：jdk，tomcat 一、前臺上傳檔案（ajax上傳） <input type=

圖片貼上上傳,預覽——相容ie（手動上傳）和谷歌瀏覽器（貼上或拖拽上傳）

1.優化上傳的css： .img-class { width: 525px; height: 290px; } .img-paste-class { width: 530px; height: 330px; } .a-file {

Java 實現ftp 檔案上傳、下載和刪除

本文利用apache ftp工具實現檔案的上傳下載和刪除。具體如下： 1、下載相應的jar包 commons-net-1.4.1.jar 2、實現程式碼如下： public class FtpUtils { //ftp伺服器地址

HTML5應用之檔案拖拽上傳

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

Java實現拖拽上傳

相關推薦