最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。
主要将实现一下两个功能：
1、使用commons-fileupload实现文件的上传（包括图片）；
2、使用jquery-form.js实现表单提交成功的回调函数。
页面设计fileupload.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>文件上传</title>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/js/jquery-form.js"></script>
<script type="text/javascript">
function subimtBtn() {
var form = $("form[name=fileForm]");
var options = {
url:'${pageContext.servletContext.contextPath}/servlet/imageUploadServlet',
type:'post',
success:function(data)
{
var jsondata = eval("("+data+")");
if(jsondata.error == "0"){
var url = jsondata.url;
alert(url)
$("#img").attr("src",url);
}else{
var message = jsondata.message;
alert(message);
}
}
};
form.ajaxSubmit(options);
//$("#fileForm").submit();
}
</script>
</head>
<body>
<div class="modal-body">
<form action='${pageContext.servletContext.contextPath}/servlet/imageUploadServlet' enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">
<input type="file" name="filename">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="subimtBtn();">提交</button>
</div>
<div>
<img alt="img" src="" id="img">
</div>
</body>
</html>
servlet实现：imageUploadServlet.java
package com.system.comtrol;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Random;
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 net.sf.json.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class ImageUploadServlet
*/
@WebServlet("/servlet/imageUploadServlet")
public class ImageUploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
PrintWriter out = response.getWriter();
// 文件保存目录路径
String savePath = request.getServletContext().getRealPath("/")+ "attached";
// 文件保存目录URL
String saveUrl = request.getContextPath() + "/attached";
// 定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
// 最大文件大小
long maxSize = 1000000;
response.setContentType("text/html; charset=UTF-8");
if (!ServletFileUpload.isMultipartContent(request)) {
out.println(getError("请选择文件。"));
return;
}
// 检查目录
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory()) {
out.println(getError("上传目录不存在。"));
return;
}
// 检查目录写权限
if (!uploadDir.canWrite()) {
out.println(getError("上传目录没有写权限。"));
return;
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if (!extMap.containsKey(dirName)) {
out.println(getError("目录名不正确。"));
return;
}
// 创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
if (!item.isFormField()) {
// 检查文件大小
if (item.getSize() > maxSize) {
out.println(getError("上传文件大小超过限制。"));
return;
}
// 检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try {
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
} catch (Exception e) {
out.println(getError("上传文件失败。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
out.println(obj.toString());
}
}
} catch (FileUploadException e1) {
e1.printStackTrace();
}
}
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toString();
}
}
项目中依赖的主要jar：commons-fileupload-1.2.jar，commons-io-1.4.jar
主要的两个js文件：jquery.min.js，jquery-form.js
这些可以去网上下载，也可以在附件中下载。
分享到：
相关推荐
// 上传成功后的回调函数，response是服务器返回的数据 console.log('上传成功'); console.log('服务器响应：', response); }, error: function(xhr, status, error) { // 上传失败时的回调 console.error('...
【AjaxSubmit()方法详解】 AjaxSubmit()方法是jQuery Form插件提供的一种功能强大的表单提交方式，它允许我们在异步提交表单时实现前后...通过设置不同的回调函数和选项，开发者可以根据具体需求定制表单提交的逻辑。
// 提交成功后的回调函数，处理服务器返回的数据 console.log('Success:', response); }, error: function(xhr, status, error) { // 提交失败时的回调函数，处理错误信息 console.error('Error:', error); }...
以上就是使用libcurl在C++中实现文件上传和POST表单数据的基本步骤。这个例子兼容了Vc++ 6.0和VS 2017，确保了不同开发环境下的兼容性。实际应用中，你需要将`http://example.com/upload`替换为你的目标服务器地址，...
3. **asyncSubmit()**：这是jQuery Form Plugin提供的一个方法，可以方便地启动一个异步表单提交，同时允许你设置额外的选项，如成功和错误回调函数。 4. **formData()**：如果你需要更复杂的表单数据处理，比如二...
同时，前端可以通过回调函数来更新UI，显示上传进度或错误信息。 在提供的压缩包`upl`中，可能包含了以下文件： 1. `SWF配置文件`：定义了文件上传的工作流程，包括步骤、事件和界面布局。 2. `EXT表单组件`：包含...
然后，`.ajaxSubmit()`方法被用来设置异步提交的参数，包括提交的URL、类型、预期的响应数据类型，以及成功和错误的回调函数。 jQuery Form Plugin还支持多种选项，例如`beforeSubmit`、`beforeSend`、`...
libcurl 是一个强大的开源库，用于在各种网络协议下发送HTTP请求，包括POST表单数据的提交和文件上传。在本教程中，我们将探讨如何利用libcurl库在C/C++程序中实现POST方法来提交表单数据并上传图片。这个过程涉及到...
- `onProgress`：文件上传过程中的回调函数，可以显示上传进度。 - `onComplete`：文件上传完成后执行的回调函数。 ### 5. 兼容性与优缺点 AjaxFileUpload依赖于HTML5的FormData和XMLHttpRequest Level 2，因此在...
配置参数如`beforeSend`、`success`、`error`等回调函数以处理上传过程的不同阶段。 ```javascript $(document).ready(function() { $('#uploadForm').on('submit', function(event) { event.preventDefault(); /...
`choose`回调函数用于预览文件，`done`回调则处理服务器返回的结果。 当用户点击“立即注册”按钮（`#get`）时，由于`lay-submit`和`lay-filter`属性的设置，layui的`form`模块会捕获此事件并触发表单提交。此时，...
jQuery Form插件是基于jQuery库的一个扩展，它允许开发者使用Ajax技术实现异步表单提交，从而提升用户体验，避免页面刷新。此外，它还支持多种提交方式，如POST、GET、PUT、DELETE等，并且可以处理文件上传。这个...
#### JavaScript 回调函数 接下来定义一个 JavaScript 函数，用于处理文件上传成功或失败的情况，并更新页面状态： ```javascript function callback(msg) { document.getElementById("file").outerHTML = ...
3. **success**: 数据成功发送到服务器后的回调函数，接收服务器返回的数据作为参数。 4. **error**: 发生错误时的回调函数，可以显示错误信息。 5. **type**: 发送请求的方式，通常为'POST'或'GET'。 6. **url**...
总的来说，ExtJS 2.x实现文件上传组件涉及到的主要知识点包括：FormPanel组件的使用、FileUploadField的创建、表单的Ajax提交、以及可能需要的额外插件如UploadProgress。通过这些技术，开发者可以构建出功能完备、...
ajaxForm方法可以接受0个或1个参数，参数既可以是一个回调函数，也可以是一个Options对象。例如： ``` $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); ``` ajaxSubmit方法可以马上...
在本文中，我们将深入探讨如何使用`mongoose.c`库实现多表单域（多input项）的文件上传功能。`mongoose.c`是一个轻量级的Web服务器C库，它允许开发者构建自己的HTTP服务器，处理包括文件上传在内的各种HTTP请求。 ...
在“使用layui实现多文件列表上传”这个项目中，主要涉及到了layui的文件上传功能，这在网页应用中是非常常见且实用的功能，尤其对于需要用户提交多份文件的场景。 首先，layui的文件上传组件是基于HTML5的File API...
5. **前端处理响应**：在Ajax的回调函数中，我们解析服务器返回的响应，根据结果更新UI，比如显示上传成功或失败的信息。 为了实现这个功能，还需要考虑一些额外的细节： - **文件大小限制**：前端和后端都需要...