java 文件上传 之 好几种方式上传。(~ o ~)~zZ

来源:互联网 发布:js数组按下标删除元素 编辑:程序博客网 时间:2024/05/19 23:56

从昨天开始吧,项目需要文件上传,想偷懒跳转页面然后提交上传文件。谁知道啊,谁知道。是要那种直接上传到服务器的那种,哇。稍微有点难度。就各种找我之前做的项目,看有没有合适的。
ps: 这几个项目所需的jar啊,css啊,什么的都在最下面的链接。
使用springmvc 上传 文件
1) 首先要搭好项目框架,需要有些spring的知识。
2) 其次就是开始搭框架啦。
1 创建一个 web项目。找到web.xml。

<servlet>        <servlet-name>springMVC</servlet-name>      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <init-param>                <param-name>contextConfigLocation</param-name>                //你的springmvc配置文件所在地。                <param-value>/WEB-INF/springmvc.xml</param-value>        </init-param>         //  加载顺序        <load-on-startup>0</load-on-startup>    </servlet>    //配置拦截方式  为.do    <servlet-mapping>        <servlet-name>springMVC</servlet-name>        <url-pattern>*.do</url-pattern>    </servlet-mapping>

2 配置好web.xml后,那就是配置springmvc的 配置文件,在WEB-INF下创建一个springmvc.xml文件。文件内容如下:

<?xml version="1.0" encoding="UTF-8"?><beans    xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns:p="http://www.springframework.org/schema/p"    xmlns:context="http://www.springframework.org/schema/context"    xsi:schemaLocation="http://www.springframework.org/schema/beans                         http://www.springframework.org/schema/beans/spring-beans-3.0.xsd                        http://www.springframework.org/schema/context                        http://www.springframework.org/schema/context/spring-context-3.0.xsd">        <!-- 启动spring注解 -->        <context:annotation-config />        <!-- 启动扫描 -->        <context:component-scan base-package="com.zrgk" />        <!-- 启动SpringMVC的注解方式 -->        <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />        <!--  配置文件上传的解析器-->        <bean id="multipartResolver"                 class="org.springframework.web.multipart.commons.CommonsMultipartResolver"                 p:defaultEncoding="utf-8">       </bean></beans>

3 在 WEB-INF 文件夹下在创建lib,引入所需的jar包。

commons-fileupload-1.2.1jarcommons-io-1.3.2.jar

4 在 WebRoot 下创建一个 upload.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>My JSP 'upload.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->  </head>  <body>       <form action="UploadController.do" method="post" enctype="multipart/form-data">           FILE: <input type="file" name="myFile" /><br/>                 <input type="submit" value=" upload" />       </form>  </body></html>

5 创建 java 文件。

package com.web.controller;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.util.Iterator;import java.util.UUID;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import org.springframework.web.multipart.commons.CommonsMultipartResolver;@Controller@RequestMapping("UploadController.do")public class UploadController {    @RequestMapping    public String upload(HttpServletRequest request) throws Exception{         //将当前上下文初始化给           CommonsMutipartResolver (多部分解析器)        CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(                request.getSession().getServletContext());        //检查form中是否有enctype="multipart/form-data"        if(multipartResolver.isMultipart(request))        {            //将request变成多部分request            MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;           //获取multiRequest 中所有的文件名            Iterator iter=multiRequest.getFileNames();            while(iter.hasNext())            {                //一次遍历所有文件                MultipartFile file=multiRequest.getFile(iter.next().toString());                file.getName();                if(file!=null)                {                    String path="E:/"+file.getOriginalFilename();                    //上传                    file.transferTo(new File(path));                }            }        }        return "upload.jsp";    }}

6 部署项目。
7 运行项目。
8 打开网址输入 127.0.0.1:端口号/你web项目名称/upload.jsp
ps:127.0.0.1:8088/springUpload/upload.jsp

使用 jq中的uploadify 来实现文件上传
ps: 这次使用的是 Java的servlet方式实现,uploadify功能也挺全,你们可以再看看文档。
1 创建一个 web项目
2 在 WEB-INF 文件夹下在创建lib,引入所需的jar包。

commons-fileupload-1.2.1.jarcommons-io-1.3.2.jar

3 WebRoot 创建一个 plugin 文件夹,在 plugin 文件夹下 在创建一个uploadify 文件,在uploadify 文件中传入
1) jquery-1.11.3.js
2) jquery.uploadify.js
3) jquery.uploadify.min.js
4) uploadify-cancel.png
5) uploadify.css
6) uploadify.swf
4 将 index.jsp修改为以下的内容:

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link href="plugin/uploadify/uploadify.css" rel="stylesheet" type="text/css" /><script src="plugin/uploadify/jquery-1.11.3.js" type="text/javascript"></script><script src="plugin/uploadify/jquery.uploadify.js" type="text/javascript"></script><script type="text/javascript">  $(document).ready(function() {      $("#uploadify").uploadify({            // uploadify 文件        'swf'       : 'plugin/uploadify/uploadify.swf',          // 后台处理的 Servlet名称,(如果使用spring,那就是你指向的controllor。)        'uploader'  : 'UploadServlet',            'folder'         : '/upload',          'queueID'        : 'fileQueue',          //背景图        'cancelImg'      : 'plugin/uploadify/uploadify-cancel.png',        'buttonText'     : '上传文件',        'auto'           : true, //设置true 自动上传 设置false还需要手动点击按钮         'multi'          : true,          'wmode'          : 'transparent',          'simUploadLimit' : 999,          'fileTypeExts'        : '*.*',         //所有类型文件         'fileTypeDesc'       : 'All Files'    });  });  </script>  </head><body>    <div>        <%--用来作为文件队列区域--%>        <div id="fileQueue" style="position:absolute; right:50px; bottom:100px;z-index:999">        </div>        <input type="file" name="uploadify" id="uploadify"/>    </div></body></html>

5 创建java 文件 就是 servlet .

package demo.servlet;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.PrintWriter;import java.util.Date;import java.util.Iterator;import java.util.List;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 org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.fileupload.util.Streams;/** * Servlet implementation class UploadServlet */@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    /**     * @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 {        // TODO Auto-generated method stub        doPost(request,response);    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        //获取真实目录        File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");          if(!tempDirPath.exists()){              tempDirPath.mkdirs();          }          DiskFileItemFactory fac = new DiskFileItemFactory();              ServletFileUpload upload = new ServletFileUpload(fac);              List<FileItem> fileList = null;              try {                  fileList = upload.parseRequest(request);              } catch (FileUploadException ex) {                  ex.printStackTrace();                  return;              }           Iterator<FileItem> it = fileList.iterator();             while(it.hasNext()){                  FileItem item =  it.next();             if(!item.isFormField()){                BufferedInputStream in = new BufferedInputStream(item.getInputStream());                     BufferedOutputStream out = new BufferedOutputStream(                                new FileOutputStream(new File(tempDirPath+"\\"+item.getName())));                  Streams.copy(in, out, true);              }          }          //          PrintWriter out = null;          try {              out = encodehead(request, response);          } catch (IOException e) {              e.printStackTrace();          }          out.close();       }    /**      * @return      * @throws IOException       * @throws IOException       * request.setCharacterEncoding("utf-8");         response.setContentType("text/html; charset=utf-8");      */      private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{          request.setCharacterEncoding("utf-8");          response.setContentType("text/html; charset=utf-8");          return response.getWriter();      }  }

6 部署项目。
7 运行项目。

使用 百度 的webupload 上传文件
ps: 这次还借助第一个《使用springmvc 上传 文件》那个项目去上传。这个百度的upload还是很强大的。有各种形式的上传,老铁们可以去搜webload 看看文档什么的。

前面的步骤(1和2)还是不变。

3 在WebRoot文件夹下创建webload文件夹,将webUpload所需的文件放到这个文件夹下。
1) jquery-1.10.1.min.js
2) Uploader.swf
3) webuploader.css
4) webuploader.js
4 在WebRoot文件夹下创建 webUpload.jsp。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" errorPage="true"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>webUpload</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    --> <link rel="stylesheet" type="text/css" href="http://127.0.0.1:8088/0425SpringMVC/webload/webuploader.css">      <script type="text/javascript" src="http://127.0.0.1:8088/0425SpringMVC/webload/jquery-1.10.1.min.js"></script>        <script type="text/javascript" src="http://127.0.0.1:8088/0425SpringMVC/webload/webuploader.js"></script><script>jQuery(function() {  var $ = jQuery,   $list = $('#thelist'),      $btn = $('#ctlBtn'),       state = 'pending',     uploader;   uploader = WebUploader.create({      // 不压缩image       resize: false,     // swf文件路径   swf: 'http://127.0.0.1:8088/0425SpringMVC/webload/Uploader.swf',      // 文件接收服务端。  server: 'UploadController.do',     // 选择文件的按钮。可选。        // 内部根据当前运行是创建,可能是input元素,也可能是flash.      pick: '#picker'    });  // 当有文件添加进来的时候  uploader.on( 'fileQueued', function( file ) {     $list.append( '<div id="' + file.id + '" class="item">' +            '<h4 class="info">' + file.name + '</h4>' +            '<p class="state">等待上传...</p>' +        '</div>' );    }); // 文件上传过程中创建进度条实时显示。   uploader.on( 'uploadProgress', function( file, percentage ) {        var $li = $( '#'+file.id ),            $percent = $li.find('.progress .progress-bar'); // 避免重复创建   if ( !$percent.length ) {      $percent = $('<div class="progress progress-striped active">' +              '<div class="progress-bar" role="progressbar" style="width: 0%">' +              '</div>' +            '</div>').appendTo( $li ).find('.progress-bar');        }        $li.find('p.state').text('上传中');        $percent.css( 'width', percentage * 100 + '%' );    });   uploader.on( 'uploadSuccess', function( file ) {        $( '#'+file.id ).find('p.state').text('已上传');    });  uploader.on( 'uploadError', function( file ) {        $( '#'+file.id ).find('p.state').text('上传出错');    });  uploader.on( 'uploadComplete', function( file ) {        $( '#'+file.id ).find('.progress').fadeOut();    });  uploader.on( 'all', function( type ) {        if ( type === 'startUpload' ) {            state = 'uploading';        } else if ( type === 'stopUpload' ) {            state = 'paused';        } else if ( type === 'uploadFinished' ) {            state = 'done';        }   if ( state === 'uploading' ) {     $btn.text('暂停上传');        } else {            $btn.text('开始上传');        }    }); $btn.on( 'click', function() {        if ( state === 'uploading' ) {            uploader.stop();        } else {            uploader.upload();        }    });});</script></head><body><div id="uploader" class="wu-example">    <!--用来存放文件信息-->    <div id="thelist" class="uploader-list"></div>    <div class="btns">        <div id="picker">选择文件</div>        <button id="ctlBtn" class="btn btn-default">开始上传</button>    </div></div></body></html>

5 写 java代码:
ps:这里使用的后台处理也是用的《使用springmvc 上传 文件》的后台。
6 项目部署。
7 运行项目。

嗯,目前就找到了这三种吧。希望可以蒙混过关。哎呀呀,忘了,忘了,还有jar,等等的链接。
百度云链接:
https://pan.baidu.com/s/1pL0xxeN

原创粉丝点击