javaWeb上传图片

上传文件所必要的两个jar包：commons-fileupload.jar、commons-io.jar。

jar包下载：github路径

核心代码：

  1.  String withPath = req.getServletContext().getRealPath("/");//获取网站的URI根路径(网站资源路径,存内容到这里可以通过浏览器访问)
  2.  String webPath = req.getContextPath();//获取网站的URL根路径(访问网站跟路径)
  3.  DiskFileItemFactory factory = new DiskFileItemFactory();
  4.  factory.setSizeThreshold(2048 * 500);
  5.  File file = new File(withPath + "\\temp");// 临时存储文件位置
  6.  String path = withPath + "\\upload";// 文件保存位置
  7.  factory.setRepository(file);
  8.  ServletFileUpload upload = new ServletFileUpload(factory);
  9.  upload.setSizeMax(1024 * 1024);// 最大的文件文1M(1024KB)
  10.  List<FileItem> items = upload.parseRequest(req);
  11.  for (FileItem item : items) {
  12.      // 如果只上传一个文件那么可以不用循环
  13.      System.out.println("for---");
  14.      if (item.isFormField()) {
  15.          // 上传的不是文件域
  16.          jo.put("status", "error");
  17.          jo.put("msg", "上传图片失败");
  18.          System.out.println(
  19.                  item.getFieldName() + "：" + item.getString());
  20.      }
  21.      else {
  22.          String fileName = item.getName();// 文件名(包括扩展名)
  23.          System.out.println("文件名为：" + fileName);
  24.          jo.put("status", "true");
  25.          InputStream in = item.getInputStream();
  26.          byte[] buffer = new byte[1024];
  27.          int len = 0;
  28.          String allFileName = path + "\\" + fileName;
  29.          OutputStream os = new FileOutputStream(allFileName);
  30.          while ((len = in.read(buffer)) != -1) {
  31.              os.write(buffer, 0, len);
  32.          }
  33.          os.close();
  34.          in.close();
  35.          jo.put("status", "true");
  36.          jo.put("msg", "上传图片成功");
  37.          jo.put("imgUrl", webPath + "/upload/" + fileName);
  38.      }
  39.  }

2.html

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%
  4.     String path = request.getContextPath();
  5. %>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  7. <html>
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10. <title>上传文件</title>
  11. <script type="text/javascript" src="<%=path%>/static/lib/myUtils.js"></script>
  12. <script type="text/javascript" src="<%=path%>/static/js/jquery-1.11.1.js"></script>
  13. </head>
  14. <body>
  15. <input type="file"/>
  16. <div class="msg"></div>
  17. <script type="text/javascript">
  18. $(document).ready(function(){
  19.     var img_formats = "jpeg,jpg,bmp,png,gif,ico,tiff,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,wmf";
  20.     var file = $("input[type='file']");
  21.     file.change(function(){
  22.         var files=this.files;
  23.         var formData=new FormData();
  24.         formData.append('files',files[0]);
  25.         var img_format = myUtils.file_format(files[0].name);
  26.         console.log(files[0].name);
  27.         if(img_format.length > 0){
  28.             if(img_formats.indexOf(img_format) >= 0){
  29.                 var img = myUtils.getFileUrl(files[0]);
  30.                 $.ajax({
  31.                     url: "<%=path%>/uploadServlet",
  32.                     type: "POST",
  33.                     data: formData,
  34.                     dataType:"json",
  35.                     /**
  36.                     *必须false才会自动加上正确的Content-Type
  37.                     */
  38.                     contentType: false,
  39.                     /**
  40.                     * 必须false才会避开jQuery对 formdata 的默认处理
  41.                     * XMLHttpRequest会对 formdata 进行正确的处理
  42.                     */
  43.                     processData: false,
  44.                     success: function (data) {
  45.                         console.log(data);
  46.                         if (data.status == "true") {
  47.                             alert(data.msg);
  48.                             $(".msg").html("<img src='"+data.imgUrl+"'/>");
  49.                         }
  50.                         if (data.status == "error") {
  51.                             alert(data.msg);
  52.                         }
  53.                         $("#imgWait").hide();
  54.                     },
  55.                     error: function () {
  56.                         alert("上传失败！");
  57.                         $("#imgWait").hide();
  58.                     }
  59.                 });
  60.             }else{
  61.                 $(".msg").text("请上传图片文件");//不是图片文件
  62.             }
  63.         }else{
  64.             $(".msg").text("上传的不是一个有效的文件");//文件没有后缀名
  65.         }
  66.     });
  67. });
  68. </script>
  69. </body>
  70. </html>

注意：上传图片的位置要放在->网站资源路径；而不是本地的资源路径，否则上传之后无法在浏览器中预览图片切记！！！

本人小白，各位大神有好的建议多多提点，一起学习共同进步

javaWeb中使用ajax上传文件的更多相关文章

  1. JavaWeb项目中使用ajax上传文件

    1.jsp $("#cxsc").click(function(){ var bankId = $("#bankId").val(); var formdata ...

  2. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  3. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  4. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  5. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  6. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  7. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  8. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  9. models渲染字典&form表单上传文件&ajax上传文件

    {# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

随机推荐

  1. Linux 学习 (二) 文件处理命令

    Linux达人养成计划 I 学习笔记 ls [选项] [文件或目录] -a: 显示所有文件,包括隐藏文件 -l: 显示详细信息 -d: 查看目录属性 -h: 人性化显示文件大小 -i: 显示inode ...

  2. 【python练习题】程序9

    #题目:暂停一秒输出. import time for i in range(5): print (i) time.sleep(1)

  3. [离散时间信号处理学习笔记] 8. z逆变换

    z逆变换的计算为下面的复数闭合曲线积分: $x[n] = \displaystyle{\frac{1}{2\pi j}}\oint_{C}X(z)z^{n-1}dz$ 式中$C$表示的是收敛域内的一条 ...

  4. Uncaught SyntaxError: Unexpected token export

    开发过程中遇到这个错误,虽然不影响使用,但是每次浏览器控制台都会有错误输出,看起来十分不舒服,故翻阅资料发现是因为浏览器虽然支持了es6,但是不支持es6的Module直接使用,需要在script标签 ...

  5. BZOJ3513[MUTC2013]idiots——FFT+生成函数

    题目描述 给定n个长度分别为a_i的木棒,问随机选择3个木棒能够拼成三角形的概率. 输入 第一行T(T<=100),表示数据组数. 接下来若干行描述T组数据,每组数据第一行是n,接下来一行有n个 ...

  6. Codeforces Round #518 (Div. 2) B. LCM gcd+唯一分解定律

    题意:给出b 求lcm(a,b)/a 在b从1-1e18有多少个不同得结果 思路lcm*gcd=a*b  转换成    b/gcd(a,b) 也就是看gcd(a,b)有多少个值  可以把b 由唯一分解 ...

  7. day5 笔记

    笔记 字符格式化输出: 占位符%s s=string 字符型%d d=dight 整数型%f f=float 浮点数 约等于小数 通过格式:%(str1,str2,str3)一一对应 数据运算 数据类 ...

  8. 自学华为IoT物联网_11 物联网操作系统介绍

    点击返回自学华为IoT物流网 自学华为IoT物联网_11 物联网操作系统介绍 1.1  物联网面临的困难 物联网终端发展面临的困难:开发者需要懂硬件和芯片的差异,自行适配硬件接口 物联网开发面临的困难 ...

  9. Manacher's Algorithm && 647. Palindromic Substrings 计算回文子串的算法

    注:转载自:https://www.cnblogs.com/love-yh/p/7072161.html

  10. 「SCOI2016」围棋 解题报告

    「SCOI2016」围棋 打CF后困不拉基的,搞了一上午... 考虑直接状压棋子,然后发现会t 考虑我们需要上一行的状态本质上是某个位置为末尾是否可以匹配第一行的串 于是状态可以\(2^m\)压住了, ...