swfupload图片上传

版权声明：本文为博主原创文章，遵循 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的urlfile_post_name : "Filedata",file_types : "*.jpg;*.png;*",file_size_limit : "5MB",file_upload_limit : 1,button_placeholder_id : "upload_id", //上传按钮占位符的idbutton_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 + "&region=" + 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>&bull;&nbsp;Nickname:<input type="text" id="nickname"placeholder="请输入你的昵称" size="10"><br /></p><p>&bull;&nbsp;UploadID：&nbsp;&nbsp;&nbsp;3.1415926</p><p>&bull;&nbsp;Region:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"id="region" placeholder="你来自哪里呢？" size="10"><br /></p><p>&bull;&nbsp;Signature:<input type="text" id="signature"placeholder="发布个性签名吧" size="10"><br /></p><p><input type="button" value="提交" onclick="AJAX()">&nbsp;&nbsp;<inputtype="reset" value="重置"></p><p>&bull;&nbsp;换上你的专属头像吧</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数据格式

swfupload图片上传相关推荐

仿58网，赶集网，百姓网swfupload图片上传效果(asp.net 2.0)
仿58网,赶集网,百姓网swfupload图片上传效果 (ASP.Net 2.0) 演示效果: 下载地址:仿58网,赶集网,百姓网swfupload图片上传效果 (ASP.Net 2.0) 后面会发布 ...
php发表图片文章代码,最新PHP图片上传的一个例子的文章【延伸阅读】
ThinkPHP+Uploadify图片上传示例 => Yii框架+CKEditor实现图片上传示例 => CodeIgniter使用类库做图片上传示例 => php+js实现异步图 ...
一个Ext2+SWFUpload做的图片上传对话框
一个Ext2+SWFUpload做的图片上传对话框的例程我们先看看对话框的布局: 布局就是在一个窗口里内嵌一个表格控件,窗口的底部工具条带一个进度条,表格的顶部工具条带几个操作按钮和一个下来选择框, ...
swfupload组件图片上传失败问题分析与总结
一.bug场景部分浏览器图片上传失败.本人参与的系统广告系统A,使用A系统上传图片时,需要调用到B系统的图片api. 二.原因分析可能原因1 :图片服务器api问题(No) 当时第一反应是,可能是 ...
PHPCMS V9手机移动端（支持单图和多图）图片上传，（PHPCMS V9前台使用layui的上传组件代替默认的SWFupload上传图片）
默认phpcms的上传图片使用的是swfupload,导致手机移动端上传图片无法使用.这里我们使用layui的上传组件来使其支持手机移动端(支持单图和多图)图片上传,效果图如下: 实现步骤: 一 ...
php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
php flash 图片上传,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...