后台学习六---ajaxFileupload文件上传下载

这一章讲讲文件的上传下载，这里我们使用ajax的上传文件方法。
ps：基于maven的springmvc框架都已经搭建好了的，如有问题，参考：
后台学习一—spring+maven+mybatis+mysql+junit整合
#1. 上传
##1.1 ajaxFileupload.js
具体的功能js都已经封装好了，我们直接把js文件下过来使用，地址：
http://download.csdn.net/detail/lxfhahaha/9823686

##1.2 pom.xml
在pom.xml里面添加我们需要引用的包

<!--上传--><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

##1.3 spring配置
applicationContext.xml里面加上这个配置

<!-- 文件上传的配置 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="104857600" /><property name="maxInMemorySize" value="4096" /><property name="defaultEncoding" value="utf-8" /></bean>

##1.4 jsp页面
前端选择并上传文件，返回url
这里要注意的是，我们要使用ajaxFileupload.js ，得先引入jquery，这个网上多得是，随便下，然后就是uploadWJ（） function，点击上传之后，会调用这个函数来实行上传功能，然后回调函数执行相应操作

<%--Created by IntelliJ IDEA.User: 11655Date: 2017/4/24Time: 12:10To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
选择文件： <input type="file" name="file" id="file"><br>
点击上传： <input type="button" name="sc" id="sc" value="Click Me" onclick="uploadWJ()"><br>
返回的url： <input type="text" id="url" name="url" placeholder="返回的url">
</body>
<script src="/js/jquery-1.8.3.min.js"></script>
<script src="/js/ajaxfileupload.js"></script>
<script>function uploadWJ() {debuggervar filename = $("#file").val();//执行上传文件操作的函数$.ajaxFileUpload({//处理文件上传操作的服务器端地址url: '/lxf/test6/file/upload',enctype: "multipart/form-data",secureuri: false,                       //是否启用安全提交,默认为falsefileElementId: 'file',                        //文件选择框的id属性dataType: "json",                       //服务器返回的格式,可以是json或xml等data: {filename: filename},success: function (data) {debuggerif (data.success == 1) {alert('文件上传成功，地址是' + data.url)$("#url").val('' + data.url)}elsealert(data.message)},error: function (msg) {alert(msg.responseText);}});}
</script>
</html>

##1.5 controller
后台代码里面有两个方法，一个是用来跳转到上传文件界面，一个用来执行上传文件方法。

package com.springmvc.lxf.controller;import net.sf.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.Date;/*** Created by 11655 on 2017/4/24.*/
@Controller
public class Test6Controller {/*** 跳转到上传界面* * @return*/@RequestMapping(value = "/lxf/test6/sc",method = RequestMethod.GET)public String toSC(){return  "/lxf/sc";}/*** 上传文件** @param request* @param file* @return*/@RequestMapping(value = "/lxf/test6/file/upload")@ResponseBodypublic JSONObject uploadWJ(HttpServletRequest request,@RequestParam(value = "file", required = false) MultipartFile file,@RequestParam("filename")String filename) {//如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中JSONObject jsonObject = new JSONObject();//获得文件上传目标路径try {if (file == null) {System.out.println("后台空");jsonObject.put("success", 0);jsonObject.put("message", "文件为空");return jsonObject;}} catch (Exception ex) {ex.printStackTrace();}String path = request.getSession().getServletContext().getRealPath("upload");//System.out.print("路径"+path);String fileName = new Date().getTime()+filename.substring(filename.lastIndexOf('.'));//设置文件名System.out.println(path);File targetFile = new File(path, fileName);if (!targetFile.exists()) {targetFile.mkdirs();}//保存try {file.transferTo(targetFile);} catch (Exception e) {e.printStackTrace();jsonObject.put("success", 0);jsonObject.put("message", "上传失败");return jsonObject;}String url = request.getRequestURL().toString();System.out.println("url" + url.substring(0, url.indexOf("/", url.indexOf("/") + 1)));System.out.print("request.getContextPath() :" + request.getContextPath() + "\n"+ "request.getRequestURL()" + request.getRequestURL());System.out.println("url:"+request.getContextPath() + "/upload/" + fileName+"\n");jsonObject.put("success", 1);jsonObject.put("message", "上传成功");jsonObject.put("url", request.getContextPath() + "/upload/" + fileName);return jsonObject;}
}

好了，现在可以看看效果

文本框里面的就是我们的url，那文件是上传到哪里去了呢？
是在我们项目的target目录->项目名->upload文件夹里面

#2. 下载
上传功能实现了，我们来实现下载功能
先在webapp目录下新建一个upload文件夹

然后在spring配置文件applicationContext.xml配置静态资源访问，加上如下代码

<mvc:resources location="/upload/" mapping="/upload/**"/>

好了，先在可以访问并下载上传的资源了，在地址栏里输入：
域名/ip（因为是本地，所以是localhost：8080/ ）+返回的url

这样就实现了下载的功能，当然了，我们在项目里也可以使用这个url，比如我们上传了一张图片，我们怎么显示他呢？
直接使img 标签的src 属性等于返回的url即可
比如我们将上面的jsp代码改成上传一张图片，成功之后显示，我们只需改下回调函数即可，加上如下代码，这段代码的意思是在id=url的元素（显示返回的url的文本框）的后面生成一个img 标签，用来显示上传的图片

 $("#url").after('<br><br><img src="'+data.url+'" style="height: 100px;width:100px;" id="pic">')

好了，今天就讲到这了，如果我有哪里讲的不对或者不好的地方，欢迎指出~

欢迎加入–qq群–JAVA后台学习交流群：486055993

后台学习六---ajaxFileupload文件上传下载相关推荐

通过ajaxFileUpload异步请求上传文件（ajaxFileUpload+servlet实现文件上传下载）
1.最终效果实现选择图片(此处以图片为例,支持所有类型文件的上传),选择之后将选择的图片在页面中显示出来,点击上传,可以将文件上传到指定的地址中,上传成功后在当前页面自动显示下载标签. 源码下载地址 ...
salesforce 零基础学习（四十二）简单文件上传下载
项目中,常常需要用到文件的上传和下载,上传和下载功能实际上是对Document对象进行insert和查询操作.本篇演示简单的文件上传和下载,理论上文件上传后应该将ID作为操作表的字段存储,这里只演示文 ...
java批量上传文件_Spring Boot2(十四)：单文件上传/下载，文件批量上传
文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备添加ma ...
springboot：实现文件上传下载实时进度条功能【附带源码】
0. 引言记得刚入行的时候,做了一个文件上传的功能,因为上传时间较久,为了用户友好性,想要添加一个实时进度条,显示进度.奈何当时技术有限,查了许久也没用找到解决方案,最后不了了之. 近来偶然想到这个 ...
JSP基础：（7）jsp分页与文件上传下载
目录 1 jsp分页 1.1 定义 1.2 Servlet控制器方法 2 文件上传下载 2.1 定义 2.2 SmartUpload 2.2.1 介绍 2.2.2 SmartUpload组件-Requ ...
struts上传word和excel文件到oracle,Struts文件上传,下载,重传,预览
[Struts2]☆★之文件上传,下载,重传,预览今日群里一兄弟问我能否给一份struts文件上传下载的例子,因为自己项目比较紧所以想在网上找些源码给他,但是纵观全网,写的都不是太全,这让新手使用 ...
linux 安装上传文件,linux常用命令（二）文件上传下载及软件安装
1.上传下载工具安装 (1)WINDOWS 到linux的文件上传及下载: windows下打开secureCRT,通过SSH连到⾄至远程linux主机: 上传下载工具安装命令:yum -y inst ...
JS 文件上传/下载
项目需要文件上传/下载想用一个轻量级的框架,但是在网上搜索都没有找到于是想自己手写一个,但是由于浏览器限制不允许获取本地路径(IE除外)所以还是用了框架 ajaxfileupload 超轻量 ...
[C# 网络编程系列]专题十一：实现一个基于FTP协议的程序——文件上传下载器...
引言: 在这个专题将为大家揭开下FTP这个协议的面纱,其实学习知识和生活中的例子都是很相通的,就拿这个专题来说,要了解FTP协议然后根据FTP协议实现一个文件下载器,就和和追MM是差不多的过程的,相信 ...

后台学习六---ajaxFileupload文件上传下载

后台学习六---ajaxFileupload文件上传下载相关推荐

最新文章

热门文章