实现文件上传，以及表单提交成功的回调函数

最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。

主要将实现一下两个功能： 
1、使用commons-fileupload实现文件的上传（包括图片）； 
2、使用jquery-form.js实现表单提交成功的回调函数。

页面设计fileupload.jsp：

Html代码  

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>文件上传</title>
  7. <script src="static/js/jquery.min.js" type="text/javascript"></script>
  8. <script type="text/javascript" src="static/js/jquery-form.js"></script>
  9. <script type="text/javascript">
  10. function subimtBtn() {
  11. var form = $("form[name=fileForm]");
  12. var options  = {
  13. url:‘${pageContext.servletContext.contextPath}/servlet/imageUploadServlet‘,
  14. type:‘post‘,
  15. success:function(data)
  16. {
  17. var jsondata = eval("("+data+")");
  18. if(jsondata.error == "0"){
  19. var url = jsondata.url;
  20. alert(url)
  21. $("#img").attr("src",url);
  22. }else{
  23. var message = jsondata.message;
  24. alert(message);
  25. }
  26. }
  27. };
  28. form.ajaxSubmit(options);
  29. //$("#fileForm").submit();
  30. }
  31. </script>
  32. </head>
  33. <body>
  34. <div class="modal-body">
  35. <form action=‘${pageContext.servletContext.contextPath}/servlet/imageUploadServlet‘ enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">
  36. <input type="file" name="filename">
  37. </form>
  38. </div>
  39. <div class="modal-footer">
  40. <button class="btn btn-primary"  onclick="subimtBtn();">提交</button>
  41. </div>
  42. <div>
  43. <img alt="img" src="" id="img">
  44. </div>
  45. </body>
  46. </html>

servlet实现：imageUploadServlet.java

Java代码  

  1. package com.system.comtrol;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.text.SimpleDateFormat;
  6. import java.util.Arrays;
  7. import java.util.Date;
  8. import java.util.HashMap;
  9. import java.util.Iterator;
  10. import java.util.List;
  11. import java.util.Random;
  12. import javax.servlet.ServletException;
  13. import javax.servlet.annotation.WebServlet;
  14. import javax.servlet.http.HttpServlet;
  15. import javax.servlet.http.HttpServletRequest;
  16. import javax.servlet.http.HttpServletResponse;
  17. import net.sf.json.JSONObject;
  18. import org.apache.commons.fileupload.FileItem;
  19. import org.apache.commons.fileupload.FileItemFactory;
  20. import org.apache.commons.fileupload.FileUploadException;
  21. import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  22. import org.apache.commons.fileupload.servlet.ServletFileUpload;
  23. /**
  24. * Servlet implementation class ImageUploadServlet
  25. */
  26. @WebServlet("/servlet/imageUploadServlet")
  27. public class ImageUploadServlet extends HttpServlet {
  28. private static final long serialVersionUID = 1L;
  29. /**
  30. * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse
  31. *      response)
  32. */
  33. protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  34. try {
  35. PrintWriter out = response.getWriter();
  36. // 文件保存目录路径
  37. String savePath = request.getServletContext().getRealPath("/")+ "attached";
  38. // 文件保存目录URL
  39. String saveUrl = request.getContextPath() + "/attached";
  40. // 定义允许上传的文件扩展名
  41. HashMap<String, String> extMap = new HashMap<String, String>();
  42. extMap.put("image", "gif,jpg,jpeg,png,bmp");
  43. // 最大文件大小
  44. long maxSize = 1000000;
  45. response.setContentType("text/html; charset=UTF-8");
  46. if (!ServletFileUpload.isMultipartContent(request)) {
  47. out.println(getError("请选择文件。"));
  48. return;
  49. }
  50. // 检查目录
  51. File uploadDir = new File(savePath);
  52. if (!uploadDir.isDirectory()) {
  53. out.println(getError("上传目录不存在。"));
  54. return;
  55. }
  56. // 检查目录写权限
  57. if (!uploadDir.canWrite()) {
  58. out.println(getError("上传目录没有写权限。"));
  59. return;
  60. }
  61. String dirName = request.getParameter("dir");
  62. if (dirName == null) {
  63. dirName = "image";
  64. }
  65. if (!extMap.containsKey(dirName)) {
  66. out.println(getError("目录名不正确。"));
  67. return;
  68. }
  69. // 创建文件夹
  70. savePath += dirName + "/";
  71. saveUrl += dirName + "/";
  72. File saveDirFile = new File(savePath);
  73. if (!saveDirFile.exists()) {
  74. saveDirFile.mkdirs();
  75. }
  76. SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
  77. String ymd = sdf.format(new Date());
  78. savePath += ymd + "/";
  79. saveUrl += ymd + "/";
  80. File dirFile = new File(savePath);
  81. if (!dirFile.exists()) {
  82. dirFile.mkdirs();
  83. }
  84. FileItemFactory factory = new DiskFileItemFactory();
  85. ServletFileUpload upload = new ServletFileUpload(factory);
  86. upload.setHeaderEncoding("UTF-8");
  87. List items = upload.parseRequest(request);
  88. Iterator itr = items.iterator();
  89. while (itr.hasNext()) {
  90. FileItem item = (FileItem) itr.next();
  91. String fileName = item.getName();
  92. if (!item.isFormField()) {
  93. // 检查文件大小
  94. if (item.getSize() > maxSize) {
  95. out.println(getError("上传文件大小超过限制。"));
  96. return;
  97. }
  98. // 检查扩展名
  99. String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
  100. if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
  101. out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许"    + extMap.get(dirName) + "格式。"));
  102. return;
  103. }
  104. SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
  105. String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
  106. try {
  107. File uploadedFile = new File(savePath, newFileName);
  108. item.write(uploadedFile);
  109. } catch (Exception e) {
  110. out.println(getError("上传文件失败。"));
  111. return;
  112. }
  113. JSONObject obj = new JSONObject();
  114. obj.put("error", 0);
  115. obj.put("url", saveUrl + newFileName);
  116. out.println(obj.toString());
  117. }
  118. }
  119. } catch (FileUploadException e1) {
  120. e1.printStackTrace();
  121. }
  122. }
  123. private String getError(String message) {
  124. JSONObject obj = new JSONObject();
  125. obj.put("error", 1);
  126. obj.put("message", message);
  127. return obj.toString();
  128. }
  129. }

项目中依赖的主要jar：commons-fileupload-1.2.jar，commons-io-1.4.jar 
主要的两个js文件：jquery.min.js，jquery-form.js 
这些可以去网上下载，也可以在附件中下载。

时间： 2024-10-16 13:19:39

实现文件上传，以及表单提交成功的回调函数的相关文章

swift文件上传及表单提交

var carData:NSMutableDictionary = NSMutableDictionary(); var request:NSMutableURLRequest = NSMutableURLRequest();         request.URL = NSURL(string: "YOUR URL ADDR");         request.HTTPMethod = "POST";         request.timeoutInterva

springmvc文件上传及表单数据封装

补充: form表单需要提交时间,springmvc封装到实体类的Date字段时,丢失时分秒,可以在controller中添加     @InitBinder     public void initBinder(WebDataBinder binder) {         SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");         dateFormat.setLenient(f

基于Http原理实现Android的图片上传和表单提交

版权声明:本文由张坤  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/794875001483009140 来源:腾云阁 https://www.qcloud.com/community 现在服务器主要是Web居多,客户端一般通过http上传文件到web服务器,最开始的设想很简单,直接将图片转化为字节流,写入到http的outstream,随后发送出去即可. 但当这种方法出现问题,服务器根据文件名这个表单中的字段来判定

php 利用http上传协议(表单提交上传图片 )

主要就是利用php 的 fsocketopen 消息传输. 这里先通过upload.html 文件提交,利用chrome抓包,可以看到几个关键的信息. 首先指定了表单类型为multipart/form-data;. boundary是分隔符 因为上传文件不在使用原有的http协议了.请求内容不再可能以 x = y方式发送了.而使用了 分隔符 字段内容 分隔符号 字段内容2 而boundary就是指定分隔符号的标志. 请求的内容就应该是这样的了. 在来看下消息体 #socket_upload.ph

记一种有图片上传的表单提交

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>动态加载下拉框中的类别_文件上传_添加商品</title

文件上传（表单文件上传）

文件上传是开发一个网站最基本的一个需求功能 前台页面的设置: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerNa

c# 模拟提交带文件上传的表单

------WebKitFormBoundary8gsfyexbIoO5OYAa Content-Disposition: form-data; name="username" admin ------WebKitFormBoundary8gsfyexbIoO5OYAa Content-Disposition: form-data; name="submit" 登录 ------WebKitFormBoundary8gsfyexbIoO5OYAa Content-D

代码模拟带文件上传的表单

使用的是Apache httpcomponents 相关的maven依赖jar包如下 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.4-alpha1</version> </dependency> <dependency><!--必

dedecms自定义表单提交成功如何返回当前页面

dedecms自定义表单提交成功如何返回当前页面 Dedecms是现在比较常用的CMS,利用dedecms建站的朋友们,肯定会做一个提交表单,对于会技术的童鞋来说,做这样一个简单的表单,是很容易的事情dedecms的自定义表单非常的灵活,无论是用户留言.在线报名.信息收集统统都可以通过自定义表单完成. 织梦自带的自定义表单提交过后会自动跳转到网站首页,可还是有很多人希望提交过后,返回当前页面,或者返回是其他的页面,等等;我们会根据自己需要实现的功能不同,而做相应的修改;下面雨田SEOER来吐槽一