jquery file upload示例

2023-01-10 08:52:41

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

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

一：准备相关js文件

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

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示例

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

上一篇：PIL合并4张图demo 800px以下的居中显示小例子


下一篇：gdb remote 使用