jQuery上传插件Uploadify使用Demo、本地上传（ssm框架下）

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

效果：

1. jar包导入：

<!-- 文件上传组件 --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency>

2. 在spring的配置文件中加上：

<!-- 支持文件上传 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- 请求编码格式 --><property name="defaultEncoding" value="utf-8"></property><!-- 上传文件大小(单位:字节) --><property name="maxUploadSize" value="50000000"></property><!-- 缓冲区大小(单位:KB) --><property name="maxInMemorySize" value="1024"></property></bean>

3. 从官网上下载可用的版本解压后添加到项目中，webapp下位置任意：

uploadify官方下载

4. jsp页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><link rel="stylesheet" href="/css/uploadify/uploadify.css" type="text/css">
</head>
<body ><div class="container"><h2>Basic Demo</h2><div id="fileQueue"></div><input type="file" name="file_upload" id="upload" />    <img id="img" style="width: 300px; height:250px;" src="data:images/uploadImgs/no_img.jpg" alt="image" />   </div><hr><script src="/js/jquery.min.js"></script><!-- uploadify --><script src="/css/uploadify/jquery.uploadify.js"></script><script type="text/javascript">$(document).ready(function(){$("#upload").uploadify({swf:"/css/uploadify/uploadify.swf",uploader:"/system/updHeadImage",fileObjName:"uploadFile",  // 控制器中参数名称auto:true,fileSizeLimit:"1024KB",fileTypeExts:"*.jpg;*.gif;*.png;",onUploadSuccess:function(file, result, response) {if(result){// 设置图片路径$("#img").attr("src",result);}// 上传失败}});});</script> </body>
</html>

5.控制器：

 /*** 修改头像* @return* @throws Exception*/@ResponseBody@RequestMapping(value="updHeadImage")public String updHeadImage(MultipartFile uploadFile ,HttpServletRequest request) throws Exception {_logger.info("＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋　执行修改头像  操作　＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ ");File targetFile;// 存储路径String msgUrl = "";// 是否上传成功标志boolean flag = false;// 取图片的原始名称、后缀String fileName = uploadFile.getOriginalFilename();if(fileName != null && fileName != ""){   // 存储路径String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/images/uploadImgs/";// 文件存储位置String path = request.getSession().getServletContext().getRealPath("/images/uploadImgs/");// 文件后缀
//            String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());// 新的文件名
//            fileName = new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;String today = DateUtil.getDate(DateUtil.yyyy_M_d);File fileToo =new File(path+"/"+today); // 如果文件夹不存在则创建    if(!fileToo .exists()  && !fileToo .isDirectory()){       fileToo .mkdir();  }targetFile = new File(fileToo, fileName);try {uploadFile.transferTo(targetFile);msgUrl = returnUrl+today+"/"+fileName;flag = true;} catch (Exception e) {e.printStackTrace();}}if(flag){return msgUrl;}return null;}/*** 修改头像* @return* @throws Exception*/@ResponseBody@RequestMapping(value="updHeadImage")public String updHeadImage(MultipartFile uploadFile ,HttpServletRequest request) throws Exception {_logger.info("＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋　执行修改头像  操作　＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ ");File targetFile;// 存储路径String msgUrl = "";// 是否上传成功标志boolean flag = false;// 取图片的原始名称、后缀String fileName = uploadFile.getOriginalFilename();if(fileName != null && fileName != ""){   // 存储路径String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/images/uploadImgs/";// 文件存储位置String path = request.getSession().getServletContext().getRealPath("/images/uploadImgs/");// 文件后缀
//            String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());// 新的文件名
//            fileName = new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;String today = DateUtil.getDate(DateUtil.yyyy_M_d);File fileToo =new File(path+"/"+today); // 如果文件夹不存在则创建    if(!fileToo .exists()  && !fileToo .isDirectory()){       fileToo .mkdir();  }targetFile = new File(fileToo, fileName);try {uploadFile.transferTo(targetFile);msgUrl = returnUrl+today+"/"+fileName;flag = true;} catch (Exception e) {e.printStackTrace();}}if(flag){return msgUrl;}return null;}

6.修改英文为中文见：

修改jquery文件上传插件uploadify的英文为中文

jQuery上传插件Uploadify使用Demo、本地上传（ssm框架下）相关推荐

windows简易版本 Redis 使用 demo样例（ssm框架下）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 在网上下载 windows 版本的Redis .下载了直接解压出来 : 2. 双击 red ...
jquery文件上传插件uploadify 讲解
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.名词解释: tracker服务器:中文叫做跟踪器,主要做调度工作,在访问上起负载均衡的作用.(t ...
【转】jquery文件上传插件uploadify在.NET中session丢失的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 基于jQuery和Flash的多文件上传插件uploadify的确很好用,具体配置和使用方法见以前的一篇文章: <一款基 ...
query上传插件uploadify参数详细分析
query上传插件uploadify参数详细分析 Uploadify Version 3.2 官网:http://www.uploadify.com/ 注:文件包里有两个js分别是:jquery.up ...
【已解决】谷歌浏览器使用上传插件Uploadify的上传按钮不显示
标题如题,情况是使用上传插件Uploadify时,在谷歌浏览器中上传按钮不显示,但是在IE中可以正常显示,并且正常上传文件. 原因原因就是,使用这个控件的时候是要flash的-但是我的谷歌默认设置 ...
ssm框架下的文件上传和下载
ssm下的文件上传和下载 1. 文件上传 1.1 文件上传需要的依赖文件上传需要使用到 commons-fileupload 和 commons-io 两个 jar 包. <dependenc ...
JQuery上传插件Uploadify使用详解
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
JQuery上传插件Uploadify使用详解 http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
jquery文件上传插件 uploadify java_jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小. ...

jQuery上传插件Uploadify使用Demo、本地上传（ssm框架下）

jQuery上传插件Uploadify使用Demo、本地上传（ssm框架下）相关推荐

最新文章

热门文章