热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

java浏览器拖拽_HTML5拖拽文件到浏览器并实现文件上传下载功能代码

先上代码,写的jsp页面,后台是tomcat服务器,所以页面里有一些java的代码,如果后台用其他语言可以无视:

3a2c5c47719654b2eb3ed26ac95e70d8.png

先上代码,写的jsp页面,后台是tomcat服务器,所以页面里有一些java的代码,如果后台用其他语言可以无视:

代码如下:

pageEncoding="UTF-8"%>

上传、下载文件

#filedrag {

display: none;

font-weight: bold;

text-align: center;

padding: 1em 0;

margin: 1em 0;

color: #555;

border: 2px dashed #555;

border-radius: 7px;

cursor: default;

}

#filedrag.hover {

color: #f00;

border-color: #f00;

border-style: solid;

box-shadow: inset 0 3px 4px #888;

}

method="post" οnsubmit="return upLoad();">

file name:

type="file" id="fileselect" name="fileselect[]" />

或者将文件拖拽到这里

File f = new File("G://defggg/");

File[] list = f.listFiles();

for (int i = 0; i

System.out.println(list[i].getName());

out.print("" + list[i].getName()

+ "
");

}

%>

var upfiles = new Array();

// getElementById

function $id(id) {

return document.getElementById(id);

}

// output information

function Output(msg) {

var m = $id("messages");

m.innerHTML = msg + m.innerHTML;

}

// file drag hover

function FileDragHover(e) {

e.stopPropagation();

e.preventDefault();

e.target.className = (e.type == "dragover" ? "hover" : "");

}

// file selection

function FileSelectHandler(e) {

// cancel event and hover styling

FileDragHover(e);

// fetch FileList object

var files = e.target.files || e.dataTransfer.files;

// process all File objects

for ( var i = 0, f; f = files[i]; i++) {

ParseFile(f);

upfiles.push(f);

}

}

// output file information

function ParseFile(file) {

Output("

文件信息: " + file.name

+ " 类型: " + file.type

+ " 大小: " + file.size

+ " bytes

");

}

function upLoad() {

if (upfiles[0]) {

var xhr = new XMLHttpRequest(); //Ajax异步传输数据

xhr.open("POST", "UploadServlet", true);

var formData = new FormData();

for ( var i = 0, f; f = upfiles[i]; i++) {

formData.append('myfile', f);

}

xhr.send(formData);

xhr.onreadystatechange=function(e){

history.go(0); //由于这个页面还要显示可以下载的文件,所以需要刷新下页面

}

return false;

}

}

// initialize

function Init() {

var fileselect = $id("fileselect"), filedrag = $id("filedrag"), submitbutton = $id("submitbutton");

// file select

fileselect.addEventListener("change", FileSelectHandler, false);

// is XHR2 available?

var xhr = new XMLHttpRequest();

if (xhr.upload) {

// file drop

filedrag.addEventListener("dragover", FileDragHover, false);

filedrag.addEventListener("dragleave", FileDragHover, false);

filedrag.addEventListener("drop", FileSelectHandler, false);

filedrag.style.display = "block";

// remove submit button

//submitbutton.style.display = "none";

}

}

// call initialization file

if (window.File && window.FileList && window.FileReader) {

Init();

}

附上后台处理上传下载的servlet,用了smartUpLoad,不能很好的解决中文问题:

代码如下:

package com.hit.software;

import java.io.IOException;

import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.jspsmart.upload.Files;

import com.jspsmart.upload.SmartUpload;

/**

* Servlet implementation class UploadServlet

*/

@WebServlet("/UploadServlet")

public class UploadServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

private ServletConfig config;

final public void init(ServletConfig config) throws ServletException {

this.config = config;

}

/**

* @see HttpServlet#HttpServlet()

*/

public UploadServlet() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

// String s = request.getParameter("pic");

// System.out.println(s);

SmartUpload mySmartUpload = new SmartUpload();

try {

mySmartUpload.initialize(config, request, response);

mySmartUpload.setMaxFileSize(150 * 1024 * 1024);

mySmartUpload.setTotalMaxFileSize(150 * 1024 * 1024);

// mySmartUpload.setAllowedFilesList("doc,txt,rar,pdf,png");

mySmartUpload.setDeniedFilesList("exe");

mySmartUpload.upload();

Files f = mySmartUpload.getFiles();

int size = f.getCount();

for (int i = 0; i

String fileName = mySmartUpload.getFiles().getFile(i)

.getFileName();

fileName = new String(fileName.trim().getBytes(), "UTF-8"); //能解决部分中文问题

System.out.println("filename=" + fileName);

if (!fileName.equals("")) {

String path = "g:/defggg/" + fileName;

f.getFile(i).saveAs(path, SmartUpload.SAVE_PHYSICAL);

}

}

} catch (Exception e) {

e.printStackTrace();

System.out.println("Unable to upload the file.");

System.out.println("Error :" + e.toString());

}

response.sendRedirect("index.jsp");

}

}

代码如下:

package com.hit.software;

import java.io.File;

import java.io.IOException;

import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.jsp.JspFactory;

import javax.servlet.jsp.JspWriter;

import javax.servlet.jsp.PageContext;

import com.jspsmart.upload.SmartUpload;

import com.jspsmart.upload.SmartUploadException;

/**

* Servlet implementation class DownloadServlet

*/

@WebServlet("/DownloadServlet")

public class DownloadServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

private ServletConfig config;

/**

* @see HttpServlet#HttpServlet()

*/

public DownloadServlet() {

super();

// TODO Auto-generated constructor stub

}

final public void init(ServletConfig config) throws ServletException {

this.config = config;

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String fileName = request.getParameter("filename");

System.out.println("down :"+fileName);

if (fileName == null) {

response.sendRedirect("index.jsp");

return;

}

fileName = "G://defggg//" + fileName;

File f = new File(fileName);

if (f.exists() && f.isFile()) {

SmartUpload su = new SmartUpload();

su.initialize(config, request, response);

su.setContentDisposition(null);

try {

su.downloadFile(fileName);

} catch (SmartUploadException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

} else {

response.sendRedirect("index.jsp");

return;

}

}

}



推荐阅读
  • JavaScript实现拖动对话框效果
    原标题:JavaScript实现拖动对话框效果代码实现:<!DOCTYPEhtml><htmllan ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因,文件需要分割成多个部分发送,因此无法按顺序接收。文章中提供了merge2.php的源码,通过使用shuffle函数打乱文件读取顺序,实现了乱序合并文件的功能。同时,还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]
  • 前端不规则图像点击_如何在前端开发的潮流中快速学习学好学以致用?
    大家好,我是致力于前端开发,前端设计,前端入门的前端小姐姐,今天为大家带来的前端新知识是【雪碧图和滑动门】,不 ... [详细]
  • css自适应字体样式?如果是一排文字,一个background‘red’;就搞定了。是多行的话,只有根据文字行高,用一张背景图横向重复。css样式自适应分辨率高度和宽度尽量使用百分 ... [详细]
  • 一、选择器CSS规则由选择器以及声明组成。*选择器分组*h1,h2,h3{}*后代选择器*pem{}*子元素选择器*pem{}*兄弟选择器(选择位于其后具有相同父元素的元素)*h ... [详细]
  • 微信小程序 button、checkbox、radio组件
    微信小程序的button、checkbox、radio三个组件都属于表单组件官方参考文档:https:developers.weixin.qq.comminiprog ... [详细]
  • 学习过程-京东注册的静态界面
    HTML源代码:<!DOCTYPEhtml><html><head><title>京东注册<title><me ... [详细]
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • 本文介绍了如何找到并终止在8080端口上运行的进程的方法,通过使用终端命令lsof -i :8080可以获取在该端口上运行的所有进程的输出,并使用kill命令终止指定进程的运行。 ... [详细]
  • 基于jquery实现简单的分页控件_jquery
    前台分页控件有很多,这里分享我的分页控件pagination.js1.0版本,该控件基于jquery。先来看一下预览效果: ... [详细]
  • packagecom.lihong.DDPush.pms;importcom.lihong.DDPush.mybatis.Parser;importorg.junit.Test;impor ... [详细]
  • HTML制作简单首页导航
    h1大标题:李广程的作业列表查看演示地址一:http:js.lgcweb.cn查看演示备用地址:http:39.105.0.128Ja ... [详细]
  • 一,添加事件1.$(li).click(function(){$(this).css(background,orange)}) ... [详细]
author-avatar
邓世璇_664_425
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有