原文链接：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. HDU 1007 Quoit Design 平面内最近点对

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 上半年在人人上看到过这个题,当时就知道用分治但是没有仔细想... 今年多校又出了这个...于是学习了一下平 ...

  2. BZOJ2002: [Hnoi2010]Bounce 弹飞绵羊（LCT）

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在 他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装 ...

  3. 如何使用maven 打包源代码呢？

    如何使用maven 打包源代码呢? http://hw1287789687.iteye.com/blog/1943157

  4. VBS 脚本调用

    https://my.oschina.net/Tsybius2014/blog/602641

  5. C++ Traits 技术

    Tarits.特性的复数. c++萃取技术就是指它. 实现方式是模板特化. STL中涉及到iterator的地方常常能用到它. gcc的STL与VS的STL略有区别. vs中下列代码,把鼠标放在ite ...

  6. elasticsearch选举master

    数据节点确定了master以后.会开启MasterPinger线程来与其保持心跳通信的逻辑假设通信过程中链接断开,会通过MasterNodeFailureListener监听器进行回调处理处理过程中会 ...

  7. 1.2 Use Cases中 Messaging官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 下面是一些关于Apache kafka 流行的使用场景.这些领域的概述,可查看博客文 ...

  8. spring 通过编程来获取属性文件

    配置可以读取属性: <beans profile="dev"> <context:property-placeholder ignore-resource-not ...

  9. 字符串中的空格替换问题（Java版）

    解决方式一:时间复杂度为O(n^2) 解决方式二:时间复杂度为O(n) 代码实现: package string; public class SpaceStringReplace2 { //len为数 ...

  10. 硬件——STM32 , SN74HC573锁存器

    74HC573是一款高速CMOS器件: 上图中:输出使能为:OE   锁存使能为:LE 典型电路: 上图中:PWR-AL-0,PWR-AL-1,PWR-AL-2:是单片机输出的高低电平给573 对应的 ...