基于HTML5+js+Java实现单文件文件上传到服务器功能

上传单文件到服务器      

应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞定。

好了,开始上代码。

HTML5代码:

 <form name="upform" action="" method="POST">
          <input type ="file" name="myfile1" id="myfile1"/><br/>
          <input type ="file" name="myfile2" id="myfile2"/><br/>
              备注:<input type="text" name="mydata" id="mydata"/><br/>
          <input type="button" value="确定" onclick="upload()"/><br/>
</form> 

js代码:

FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,我们可以通过append向FormData里面添加各种需要提交的数据。

 url:/adata/adata/payment/PaymentAction/upload.menu----指的是你Java接受信息的action路径

_pathName=/adata//payment.jsp-----------指的是你HTML5页面的虚拟路径。

alert(result);-------指的是从Java后台返回的信息。

function upload() {
 mydata = document.getElementById("mydata").files[0];
 formData = new FormData();
 formData.append("mydata", mydata);
  $.ajax({
       contentType:"multipart/form-data",
       url:"/adata/adata/payment/PaymentAction/upload.menu?_pathName=/adata//payment.jsp",
       type:"POST",
       data:formData,
       dataType:"text",
       processData: false, // 告诉jQuery不要去处理发送的数据
       contentType: false, // 告诉jQuery不要去设置Content-Type请求头
       success: function(result){
       alert(result);
 }
 });
}

Java代码:

String savePath = "d:/";//存储路径
      String retMsg = "";//定义将返回给客户端的信息
      try {
        if (ServletFileUpload.isMultipartContent(request)) {
          List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
          for (FileItem item : items) {
            if (!item.isFormField()) {// 过滤掉表单中非文件域
              String fileType = item.getName().substring(item.getName().lastIndexOf(".") + 1).toLowerCase();//文件类型
              String fileName = new Date().getTime() + "." + fileType; //保存的文件名
              String filePath = savePath + "\\" + fileName; //保存的文件路径
              BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
              BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));// 获得文件输出流
              org.apache.commons.fileupload.util.Streams.copy(in, out, true);// 开始把文件写到指定的上传文件夹
              retMsg += "上传文件成功!";
              in.close();
              out.close();
            }
          }
        }
        response.setContentType("text/html;charset=utf8");
        PrintWriter pw = response.getWriter();
        pw.print(retMsg);
        pw.flush();
        pw.close();
        //根据自己需要返回页面一个 retMsg
         // return retMsg 证明上传成功
      } catch (Exception e) {
        e.printStackTrace();
      } 

总结

以上所述是小编给大家介绍的基于HTML5+js+Java实现单文件文件上传到服务器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

时间: 2017-08-18

JAVA技术实现上传下载文件到FTP服务器(完整)

具体详细介绍请看下文: 在使用文件进行交互数据的应用来说,使用FTP服务器是一个很好的选择.本文使用Apache Jakarta Commons Net(commons-net-3.3.jar) 基于FileZilla Server服务器实现FTP服务器上文件的上传/下载/删除等操作. 关于FileZilla Server服务器的详细搭建配置过程,详情请见 FileZilla Server安装配置教程 .之前有朋友说,上传大文件(几百M以上的文件)到FTP服务器时会重现无法重命名的问题,但本人亲

Java实现ftp上传下载、删除文件及在ftp服务器上传文件夹的方法

一个JAVA 实现FTP功能的代码,包括了服务器的设置模块,并包括有上传文件至FTP的通用方法.下载文件的通用方法以及删除文件.在ftp服务器上传文件夹.检测文件夹是否存在等,里面的有些代码对编写JAVA文件上传或许有参考价值,Java FTP主文件代码: package ftpDemo; import java.io.DataOutputStream; import java.io.InputStream; import java.io.OutputStream; import sun.net

Ajax上传实现根据服务器端返回数据进行js处理的方法

本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.

Java通过FTP服务器上传下载文件的方法

对于使用文件进行交换数据的应用来说,使用FTP 服务器是一个很不错的解决方案. 关于FileZilla Server服务器的详细搭建配置过程,详情请见FileZilla Server安装配置教程.之前有朋友说,上传大文件(几百M以上的文件)到FTP服务器时会重现无法重命名的问题,但本人亲测上传2G的文件到FileZilla Server都没有该问题,朋友们可以放心使用该代码. FavFTPUtil.Java package com.favccxx.favsoft.util; import jav

Java实现图片上传到服务器并把上传的图片读取出来

在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚) 实现的思路: 工具:MySQL,eclipse 首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息, 一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID, T_touxiang表中的用户ID对应了t_user中的i

利用nodejs监控文件变化并使用sftp上传到服务器

最近在用react+express做一个自己的工具型网站(其实就是夺宝岛抢拍器) 然后因为经常要改动,而且又要放到服务器上进行测试.总是要webpack,然后手动把文件上传上去,不胜其烦,索性搜索了下,直接写个能检测文件变化并自动进行上传的脚本好了. 首先,我们使用npm 安装两个别人封装好的模块. npm install ssh2-sftp-client npm install gaze 第一个模块的作用是sftp上传文件, 第二个模块的作用就是监听文件变化了.当然,你也可以采用node自带f

java基于servlet编写上传下载功能 类似文件服务器

本人闲来无事,写了个servlet,实现上传下载功能.启动服务后,可以在一个局域网内当一个小小的文件服务器. 一.准备工作 下载两个jar包: commons-fileupload-1.3.1.jar commons-io-2.2.jar 二.创建一个web工程 我的工程名叫:z-upload 三.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="ht

轻松创建nodejs服务器(10):处理上传图片

本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来. 这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块.它对解析上传的文件数据做了很好的抽象. 要安装这个外部模块,需在cmd下执行命令: 复制代码 代码如下: npm install formidable 如果输出类似的信息就代表安装成功了: 复制代码 代码如下: npm info build Success: formidable@1.0.14 安装成功后我们用request将其引入

NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=

java实现将文件上传到ftp服务器的方法

本文实例讲述了java实现将文件上传到ftp服务器的方法.分享给大家供大家参考,具体如下: 工具类: package com.fz.common.util; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; imp

java文件上传至ftp服务器的方法

用java实现ftp文件上传.我使用的是commons-net-1.4.1.zip.其中包含了众多的java网络编程的工具包. 1.把commons-net-1.4.1.jar包加载到项目工程中去. 2.看如下代码: import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import org.apache.commons.net.ft

java实现多文件上传至本地服务器功能

博主最近在做一个内网项目,内部可以访问外部数据,但是外部访问不了内部数据,这也就造成了可能文件无法上传,所以博主另辟蹊径,在本地服务器上建立一个文件夹专门用来存储上传数据. 环境:jdk,tomcat 一.前台上传文件(ajax上传) <input type="file" name="annexUrl" id="annexUrl" multiple="multiple"/> 其中multiple="mul

Java FTPClient实现文件上传下载

在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件. 所用到的jar包有:  commons-net-1.4.1.jar  jakarta-oro.jar  一.上传文件 文件上传源代码 /** * Description: 向FTP服务器上传文件 * @Version1.0 * @param url FTP服务器hostname * @param

Java FtpClient 实现文件上传服务

一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /bin/bash uftp 3.设置用户密码 sudo useradd -d /home/uftp -s /bin/bash uftp 4.创建用户目录 sudo mkdir /home/uftp 5.设置用户密码 sudo passwd uftp 6.设置/etc/vsftpd.conf配置文件 s

java组件fileupload文件上传demo

在我们的web开发中,很多的时候都需要把本机的一些文件上传到web服务器上面去. 如:一个BBS系统,当用户使用这是系统的时候,能把本机的一些图片,文档上传到服务器上面去.然后其他用户可以去下载这些文件,那么这样的话,我们可以自己编程实现文件的上传,但是更好的方式是使用一些已有的组件帮助我们实现这种上传功能. 常用的上传组件: Apache 的 Commons FileUpload JavaZoom的UploadBean jspSmartUpload FileUpload下载地址: http:/

Java中实现文件上传下载的三种解决方案(推荐)

java文件上传与文件下载是程序开发中比较常见的功能,下面通过本文给大家介绍Java中实现文件上传下载的三种解决方案,具体详情如下所示: 第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null; String fileAddre="/numUp"; try { InputStream stream = file.getInputStream(

Java实现的文件上传下载工具类完整实例【上传文件自动命名】

本文实例讲述了Java实现的文件上传下载工具类.分享给大家供大家参考,具体如下: 这是一个在Eclipse环境下采用Java语言实现文件上传下载的工具类.和之前介绍的C#文件上传下载工具类一样,在上传时,为避免文件名在服务器中重复,采用"服务器时间(定义到毫秒)+文件名+文件后缀"的方式作为服务器上的文件名:下载过程中利用 spring mvc ResponseEntity 做文件下载,返回的是字节流,下载成功后可自定义文件的保存路径. 具体源码如下所示: package com.ut

PHP 文件上传后端处理实用技巧方法

PHP 文件上传后端处理实用技巧方法 引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上传的文件大一点!那么,本文就来说说,后端处理都有些什么技巧吧! 业务场景一.我们只会选择一个单个的文件上传,而且不需要做一些即时的验证工作.那么,也许并没有什么优化可言了,因为,最后你要做的,只是将这个文件放在表单里最后一起提交,直接处理即可! 业务场景二.需要

android选择视频文件上传到后台服务器

本文实例为大家分享了android选择视频文件上传到后台服务器的具体代码,供大家参考,具体内容如下 选择本地视频文件 附上Demo 首先第一步打开打开相册选择视频文件: Intent intent = new Intent(); intent.setType("video/*"); intent.setAction(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); ((Activity)