原文链接：http://blog.csdn.net/qq_37936542/article/details/79258158

jquery file upload是一款实用的上传文件插件，项目中刚好用到，在这里记录分享一下。

一：准备相关js文件

jquery file upload 下载地址：点击打开链接  点击下面红圈中的按钮下载

jquery.js下载地址：点击打开链接

二：导入js文件

注意：js文件引入的先后顺序不可以乱

  1. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  2. <!-- jquery file upload相关js -->
  3. <script src="js/jquery.ui.widget.js"></script>
  4. <script src="js/jquery.iframe-transport.js"></script>
  5. <script src="js/jquery.fileupload.js"></script>
  6. <script src="js/jquery.fileupload-process.js"></script>
  7. <script src="js/jquery.fileupload-validate.js"></script>

三：jsp代码

  1. <style>
  2. /* input样式 */
  3. #uploadImg{
  4. display: none;
  5. }
  6. /* button样式 */
  7. #chooseFile{
  8. background: #93b6fc;
  9. }
  10. #uploadFile,#rechooseFile {
  11. display: none;
  12. background: #93b6fc;
  13. }
  14. #image{
  15. width:200px;
  16. height:200px;
  17. }
  18. /* 进度条样式 */
  19. .bar {
  20. background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);
  21. background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%);
  22. background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));
  23. background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%);
  24. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
  25. background-repeat: repeat-x;
  26. height: 20px;
  27. line-height: 20px;
  28. -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  29. box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  30. -webkit-transition: width .6s ease;
  31. -o-transition: width .6s ease;
  32. transition: width .6s ease;
  33. }
  34. #progress {
  35. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
  36. background-repeat: repeat-x;
  37. height: 20px;
  38. width: 0%;
  39. margin-bottom: 20px;
  40. overflow: hidden;
  41. background-color: #f5f5f5;
  42. border-radius: 4px;
  43. -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  44. box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  45. margin-top: 20px;
  46. }
  47. </style>
  48. <body>
  49. <div class="jquery-fileupload">
  50. <div class="">
  51. <input id="uploadImg" type="file" name="uploadImg" multiple style="display: none" />
  52. <button id="chooseFile">+选择文件</button>
  53. <button id="uploadFile">~开始上传</button>
  54. <button id="rechooseFile">+重新选择</button>
  55. </div>
  56. <div>
  57. <img id="image" src="">
  58. </div>
  59. <div id="progress">
  60. <div class="bar" style="width: 0%;"></div>
  61. </div>
  62. </div>
  63. </body>

四：js代码

  1. $(function() {
  2. $("#chooseFile").on("click", function() {
  3. $("#uploadImg").click();
  4. });
  5. $('#uploadImg').fileupload({
  6. url : '/FileTest/upload',//请求发送的目标地址
  7. Type : 'POST',//请求方式 ，可以选择POST，PUT或者PATCH,默认POST
  8. //dataType : 'json',//服务器返回的数据类型
  9. autoUpload : false,
  10. acceptFileTypes : /(gif|jpe?g|png)$/i,//验证图片格式
  11. maxNumberOfFiles : 1,//最大上传文件数目
  12. maxFileSize : 1000000, // 文件上限1MB
  13. minFileSize : 100,//文件下限  100b
  14. messages : {//文件错误信息
  15. acceptFileTypes : '文件类型不匹配',
  16. maxFileSize : '文件过大',
  17. minFileSize : '文件过小'
  18. }
  19. })
  20. //图片添加完成后触发的事件
  21. .on("fileuploadadd", function(e, data) {
  22. //validate(data.files[0])这里也可以手动来验证文件格式和大小
  23. //隐藏或显示页面元素
  24. $('#progress .bar').css(
  25. 'width', '0%'
  26. );
  27. $('#progress').hide();
  28. $("#chooseFile").hide();
  29. $("#uploadFile").show();
  30. $("#rechooseFile").show();
  31. //获取图片路径并显示
  32. var url = getUrl(data.files[0]);
  33. $("#image").attr("src", url);
  34. //绑定开始上传事件
  35. $('#uploadFile').click(function() {
  36. $("#uploadFile").hide();
  37. jqXHR = data.submit();
  38. //解绑，防止重复执行
  39. $("#uploadFile").off("click");
  40. })
  41. //绑定点击重选事件
  42. $("#rechooseFile").click(function(){
  43. $("#uploadImg").click();
  44. //解绑，防止重复执行
  45. $("#rechooseFile").off("click");
  46. })
  47. })
  48. //当一个单独的文件处理队列结束触发(验证文件格式和大小)
  49. .on("fileuploadprocessalways", function(e, data) {
  50. //获取文件
  51. file = data.files[0];
  52. //获取错误信息
  53. if (file.error) {
  54. console.log(file.error);
  55. $("#uploadFile").hide();
  56. }
  57. })
  58. //显示上传进度条
  59. .on("fileuploadprogressall", function(e, data) {
  60. $('#progress').show();
  61. var progress = parseInt(data.loaded / data.total * 100, 10);
  62. $('#progress').css(
  63. 'width','15%'
  64. );
  65. $('#progress .bar').css(
  66. 'width',progress + '%'
  67. );
  68. })
  69. //上传请求失败时触发的回调函数
  70. .on("fileuploadfail", function(e, data) {
  71. console.log(data.errorThrown);
  72. })
  73. //上传请求成功时触发的回调函数
  74. .on("fileuploaddone", function(e, data) {
  75. alert(data.result);
  76. })
  77. //上传请求结束后，不管成功，错误或者中止都会被触发
  78. .on("fileuploadalways", function(e, data) {
  79. })
  80. //手动验证
  81. function validate(file) {
  82. //获取文件名称
  83. var fileName = file.name;
  84. //验证图片格式
  85. if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(fileName)) {
  86. console.log("文件格式不正确");
  87. return true;
  88. }
  89. //验证excell表格式
  90. /*  if(!/.(xls|xlsx)$/.test(fileName)){
  91. alert("文件格式不正确");
  92. return true;
  93. } */
  94. //获取文件大小
  95. var fileSize = file.size;
  96. if (fileSize > 1024 * 1024) {
  97. alert("文件不得大于一兆")
  98. return true;
  99. }
  100. return false;
  101. }
  102. //获取图片地址
  103. function getUrl(file) {
  104. var url = null;
  105. if (window.createObjectURL != undefined) {
  106. url = window.createObjectURL(file);
  107. } else if (window.URL != undefined) {
  108. url = window.URL.createObjectURL(file);
  109. } else if (window.webkitURL != undefined) {
  110. url = window.webkitURL.createObjectURL(file);
  111. }
  112. return url;
  113. }
  114. });

五：服务器端代码

1：导入依赖

  1. <dependency>
  2. <groupId>commons-fileupload</groupId>
  3. <artifactId>commons-fileupload</artifactId>
  4. <version>1.3.1</version>
  5. </dependency>

2：配置springmvc上传解析器

  1. <!-- springmvc文件上传解析器 -->
  2. <bean id="multipartResolver"
  3. class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  4. <property name="defaultEncoding" value="UTF-8" />
  5. <property name="maxUploadSize" value="-1" />
  6. </bean>

3：java代码

  1. package com.mote.upload;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.io.InputStream;
  5. import java.text.SimpleDateFormat;
  6. import java.util.Date;
  7. import javax.servlet.http.HttpServletRequest;
  8. import org.apache.commons.io.FileUtils;
  9. import org.springframework.stereotype.Controller;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RequestMethod;
  12. import org.springframework.web.bind.annotation.RequestParam;
  13. import org.springframework.web.bind.annotation.ResponseBody;
  14. import org.springframework.web.multipart.MultipartFile;
  15. @Controller
  16. public class FileUploadController {
  17. /**
  18. * 将图片上传到服务器根目录下
  19. * @param @param multipartFile
  20. * @param @param request
  21. * @param @return
  22. * @return String
  23. * @throws
  24. */
  25. @RequestMapping(value = "/upload",method=RequestMethod.POST)
  26. @ResponseBody
  27. public String upload(
  28. @RequestParam("uploadImg") MultipartFile multipartFile,
  29. HttpServletRequest request) {
  30. try {
  31. //获取项目路径
  32. String realPath = request.getSession().getServletContext()
  33. .getRealPath("");
  34. InputStream inputStream = multipartFile.getInputStream();
  35. String contextPath = request.getContextPath();
  36. //服务器根目录的路径
  37. String path = realPath.replace(contextPath.substring(1), "");
  38. //根目录下新建文件夹upload，存放上传图片
  39. String uploadPath = path + "upload";
  40. //获取文件名称
  41. String filename = getUploadFileName(multipartFile);
  42. //将文件上传的服务器根目录下的upload文件夹
  43. File file = new File(uploadPath, filename);
  44. FileUtils.copyInputStreamToFile(inputStream, file);
  45. //返回图片访问路径
  46. String url = request.getScheme() + "://" + request.getServerName()
  47. + ":" + request.getServerPort() + "/upload/" + filename;
  48. return url;
  49. } catch (IOException e) {
  50. e.printStackTrace();
  51. }
  52. return null;
  53. }
  54. /**
  55. * 获取上传文件的名称,新文件名为原文件名加上时间戳
  56. *
  57. * @param multipartFile
  58. *            multipartFile
  59. * @return 文件名
  60. */
  61. private String getUploadFileName(MultipartFile multipartFile) {
  62. String uploadFileName = multipartFile.getOriginalFilename();
  63. String fileName = uploadFileName.substring(0,
  64. uploadFileName.lastIndexOf("."));
  65. String type = uploadFileName.substring(uploadFileName.lastIndexOf("."));
  66. SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
  67. String timeStr = sdf.format(new Date());
  68. String name = fileName + "_" + timeStr + type;
  69. return name;
  70. }
  71. }

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等8G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程


领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

jquery file upload示例的更多相关文章

  1. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  2. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  3. 用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  4. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  5. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  6. jquery ajax发送delete(use in jquery file upload delete file)

    环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...

  7. jquery file upload 后台收到的文件名中文乱码， filename中文乱码

    在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下:

  8. jQuery File Upload

    jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...

  9. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

随机推荐

  1. 玲珑杯 Round 19 B Buildings （RMQ + 二分）

    DESCRIPTION There are nn buildings lined up, and the height of the ii-th house is hihi. An inteval [ ...

  2. 每日技术总结：fly.js，个位数前补零等

    01.FLY.JS 文档:https://wendux.github.io/dist/#/doc/flyio/readme 02.微信小程序组件——input属性之cursor-spacing 属性 ...

  3. Appium_Java_API

    1. driver.findElement(MobileBy.AndroidUIAutomator("邀请")).click();2. driver.findElementById ...

  4. Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...

  5. C# 文件转byte数组，byte数组再转换文件

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. 【Codeforces Round #450 (Div. 2) A】Find Extra One

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. 看看Y左边或右边的点个数是否<=1 [代码] #include <bits/stdc++.h> using ...

  7. PHP模拟链表操作

    PHP模拟链表操作 一.总结 1.类成员用的是-> 2.对象节点相连的话,因为是对象,所以不用取地址符号 3.数组传递参数的时候传引用的方法 ,& 二.PHP模拟链表操作 代码一: /* ...

  8. Ten ways to improve the performance of large tables in MySQL--转载

    原文地址:http://www.tocker.ca/2013/10/24/improving-the-performance-of-large-tables-in-mysql.html Today I ...

  9. PyCharm下载主题以及个性化设置(详细)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载主题 1.在http://www.themesmap.com/theme.html上选择自己喜欢的主题点进去后进行下载. ...

  10. 怎样用Adobe Acrobat 7 Pro把PDF文档拆分成多个啊？

    这个pdf文档里有多篇文章,我想把他们分开并分别保存在独立的pdf文档.怎么操作?我的电脑基础不太好,麻烦说得详细一些. Adobe Acrobat 7 Pro拆分PDF文档的方法: 1.点左边的“书 ...