版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43849864/article/details/103488536
swfupload是啥？
- swfupload是一个联合flash和javascript，功能非常强大的文件上传插件。
swfupload的主要特性：
- 文件浏览对话框中可以选择多个文件； AJAX风格的上传，不用重刷新；可以在客户端调节图片大小；它使用的类命名空间兼容各种js库(i.e., jQuery, Prototype, 等.) ；支持 Flash 9 and Flash 10(2.2.0版本后取消对flash 8的支持)
- swfupload-v2还包含了许多新特性，这里就不再赘述
本文主要讲解图片上传实例，想要深入了解swfupload的小伙伴（阅读本文前建议先做个基本了解）可戳菜鸟教程→SWFUpload使用指南
swfupload图片上传实例
- 直接进入正题！贴心的博主已经将需要的jar包及js文件打包好→[戳我获取]
- 项目结构（项目为动态网站；注意jar包、js文件以及jsp页面的存放目录）
- css样式文件（mystyle.css）
@charset "UTF-8";
body {
text-align: center
}
#divcss3 {
margin-left: 500px;
margin-right: 500px;
margin-top: 0;
padding-top: 25px;
padding-bottom: 100px;
}
.img_id {
width: 216px;
height: 200px;
margin-left: 150px;
border-style: double;
}
.img_id img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
- JSP页面（本案例最核心的文件）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SwfuploadReview-demo</title>
<script src="js/swfupload/swfupload.js"></script>
<script src="js/swfupload/handlers.js"></script>
<script src="js/swfupload/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<script type="text/javascript">
var swfu;
window.onload = function() {
var settings_object = { //定义参数配置对象
upload_url : "servlet/UploadHandleServlet", //接收上传的服务端url(servlet请求路径)
flash_url : "js/swfupload/swfupload.swf", //swfupload.swf的url
file_post_name : "Filedata",
file_types : "*.jpg;*.png;*",
file_size_limit : "5MB",
file_upload_limit : 1,
button_placeholder_id : "upload_id", //上传按钮占位符的id
button_width : 95,
button_height : 35,
button_text : '<span class="button_text">点击上传</span>',
button_text_style : '.button_text {color: #383838;font-size:20px;font-family:"微软雅黑"}',
button_text_top_padding : 5,
button_text_left_padding : 5,
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
swfupload_loaded_handler : swfupload_loaded_function,
file_dialog_complete_handler : file_dialog_complete_function, //文件对话完成处理函数
upload_error_handler : upload_error_function, //上传失败处理函数
upload_success_handler : upload_success_function, //上传成功处理函数
upload_complete_handler : upload_complete_function, //上传完成处理函数
};
swfu = new SWFUpload(settings_object); //实例化一个SWFUpload，传入参数配置对象
};
/*定义各种事件监听函数*/
function swfupload_loaded_function() {
}
function file_dialog_complete_function() {
this.startUpload();
}
//上传失败事件监听
function upload_error_function() {
alert("上传失败!");
}
//上传完成事件监听
function upload_complete_function() {
}
//上传成功事件监听
function upload_success_function(obj, data, response) {
var path = "upload/" + data;//回显路径
$("#img").attr('src', path);//使用jquery修改img中src路径
alert("已上传成功，是否显示？");
}
function AJAX() {
var nickname = $("#nickname").val();
var region = $("#region").val();
var signature = $("#signature").val();
// 使用ajax发送请求
$.ajax({
type : "POST",
url : "servlet/TestServlet", // servlet映射地址
statusCode : {
404 : function() {
alert("url地址异常!");
}
},
cache : false,
data : {nickname : nickname,region : region,signature : signature},//json对象形式
//data : "nickname=" + nickname + "®ion=" + region + "&signature="+ signature,//标准参数形式
/* data:JSON.stringify({nickname: 'nickname', region: 'region',signature: 'signature'}),
dataType: "json",
contentType: 'application/json;charset=utf-8', */ //json字符串形式 后台需要结合@RequestBody解析
success : function(result) {
alert(result);//将后台返回结果弹出
}
})
}
</script>
</head>
<body>
<form action="servlet/TestServlet" method="post">
<div id=divcss3 style="background-color: darkcyan; color: snow;">
<h1 style="font-family: 楷体;">个人中心</h1>
<p>
• Nickname:<input type="text" id="nickname"
placeholder="请输入你的昵称" size="10"><br />
</p>
<p>• UploadID： 3.1415926</p>
<p>
• Region: <input type="text"
id="region" placeholder="你来自哪里呢？" size="10"><br />
</p>
<p>
• Signature:<input type="text" id="signature"
placeholder="发布个性签名吧" size="10"><br />
</p>
<p>
<input type="button" value="提交" onclick="AJAX()"> <input
type="reset" value="重置">
</p>
<p>• 换上你的专属头像吧</p>
<div class="img_id">
<img id="img" alt="" src="">
</div>
<div id="upload_id"></div>
</div>
</form>
</body>
</html>
注：function AJAX()前一部分是swfupload图片上传的关键代码，后一部分是ajax请求和form表单的使用
后台创建两个servlet类（由于使用的是post方式，所以保留doPost方法，其他删除）
- swfupload图片上传对应的后台servlet（UploadHandleServlet.java）
package com.me.swfupload.controller;
import java.io.File;
import java.io.IOException;
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;
/**
* swfupload图片上传
* @author 浅浅
*/
@WebServlet("/UploadHandleServlet")
public class UploadHandleServlet extends HttpServlet {
// 序列化保持版本兼容性
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 得到上传文件的保存目录，将上传的文件存放于upload目录下
String savePath = this.getServletContext().getRealPath("/upload");
File file = new File(savePath);
// 判断上传文件的保存目录是否存在；不存在则创建目录
if (!file.exists() && !file.isDirectory()) {
file.mkdir();
}
// 设定缓冲区大小和存放临时文件目录，如果上传的文件小于1M，直接写入硬盘，不经过缓冲区
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setRepository(new File(savePath));
factory.setSizeThreshold(1024 * 1024);
ServletFileUpload sfu = new ServletFileUpload(factory);
String fileName = "";
try {
List<FileItem> items = sfu.parseRequest(request);// 解析request请求
Iterator<FileItem> it = items.iterator();// 获取一个迭代器中当前位置的对象
while (it.hasNext()) {
FileItem fi = (FileItem) it.next();
if (!fi.isFormField()) { // 如果上传的是规定好的文件格式
fileName = fi.getName();
System.out.println("获取到文件名-file name=" + fileName);
fi.write(new File(savePath, fileName));// 写入硬盘
}
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
response.setCharacterEncoding("UTF-8");// 文件为中文命名时仍回传
response.getWriter().print(fileName);// 回传src
}
}
- ajax请求和后台参数接收对应的servlet（TestServlet.java）
package com.me.swfupload.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* form表单后台参数接收测试
* @author 浅浅
*/
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String nickname = request.getParameter("nickname");
String region = request.getParameter("region");
String signature = request.getParameter("signature");
System.out.println("接收到前台ajax请求！");
if (nickname != null && !"".equals(nickname)) {
response.getWriter().println("Success！Nickname设置完成"); // 将结果返回到前端
} else {
response.getWriter().println("Error！请完成Nickname设置");
}
if (region != null && !"".equals(region)) {
response.getWriter().println("Success！Region设置完成"); // 将结果返回到前端
} else {
response.getWriter().println("Error！请完成Region设置");
}
if (signature != null && !"".equals(signature)) {
response.getWriter().println("Success！Signature已添加"); // 将结果返回到前端
} else {
response.getWriter().println("Tips!添加属于您的Signature吧！");
}
}
}
- web.xml文件如何设置？（如果页面文件为WebContent目录下的index.jsp，则默认的内容保留，添加以下servlet相关的配置）
<servlet>
<description></description>
<display-name>UploadHandleServlet</display-name>
<servlet-name>UploadHandleServlet</servlet-name>
<servlet-class>com.me.swfupload.controller.UploadHandleServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadHandleServlet</servlet-name>
<url-pattern>/servlet/UploadHandleServlet</url-pattern>
</servlet-mapping>
<servlet>
<description></description>
<display-name>TestServlet</display-name>
<servlet-name>TestServlet</servlet-name>
<servlet-class>com.me.swfupload.controller.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/servlet/TestServlet</url-pattern>
</servlet-mapping>
效果图
控制台输出信息：
- end
swfupload图片上传和ajax请求后台参数接收，你get到了吗？
想了解更多ajax，可戳我的另一篇文章→Ajax请求的data数据格式
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
