Uploadify 控件上传图片 + 预览
jquery的Uploadify控件上传图片和预览使用介绍。
在简单的servlet系统中和在SSH框架中,后台处理不同的,在三大框架中图片预览时费了不少力气,所以下面将两种情况都介绍一下。
1,前台代码
script:
- $("#uploadify").uploadify({
- ‘langFile‘ : ‘<%=request.getContextPath()%>/config/juploadify/uploadifyLang_cn.js‘,
- ‘swf‘ : ‘<%=request.getContextPath()%>/config/juploadify/uploadify.swf‘,
- ‘uploader‘ : ‘<%=request.getContextPath()%>/UploadAction/uploadImg.action‘, //图片上传的action方法
- ‘queueID‘ : ‘fileQueue‘,
- ‘auto‘ : true,
- ‘multi‘ : true,
- ‘buttonCursor‘ : ‘hand‘,
- ‘fileObjName‘ : ‘uploadify‘,
- ‘buttonText‘ : ‘上传图片‘,
- ‘height‘ : ‘25‘,
- ‘progressData‘ : ‘percentage‘,
- ‘fileTypeDesc‘ : ‘支持格式:jpg/gif/jpeg/png/bmp.‘,
- ‘fileTypeExts‘: ‘*.jpg;*.gif;*.jpeg;*.png;*.bmp‘,//允许的格式
- onUploadSuccess : function(file,data,response) {
- //设置图片预览
- var _arr_val = data.split(",");
- $("#photo").val(_arr_val[1]);
- $("#pic_view").attr("src","<%=request.getContextPath()%>" + _arr_val[1]);
- }
- });
html
- <td width="15%" rowspan="9" align="center">
- <div id="fileQueue" style="width:200px;"></div>
- <input type="file" name="uploadify" id="uploadify" />
- <input type="hidden" name="photo" id="photo" value="">
- <div id="pic_view_div" style="width:150px; height:180px">
- <img src="<%=request.getContextPath()%>/image/nopic.gif" width="150" height="180" id="pic_view">
- </div>
- </td>
2,servlet中后台处理
- public void uploadImg(){
- // 解决服务器端消息返回客户端后中文字符乱码
- response.setHeader("Content-Type", "text/html;charset=UTF-8");
- HttpSession session = request.getSession();
- PrintWriter outs = response.getWriter();
- //获取上传图片的路径
- String savePath = request.getSession().getServletContext().getRealPath("");
- String saveDirectory = savePath + "/Imgupload";
- File file = new File(saveDirectory);
- if (!file.exists()) {
- file.mkdirs();
- }
- //设置图片大小
- if (StringUtils.isBlank(this.fileSizeLimit.toString())) {
- this.fileSizeLimit = "100";// 默认100M
- }
- int maxPostSize = Integer.valueOf(this.fileSizeLimit).intValue() * 1024 * 1024;
- String encoding = "UTF-8";
- MultipartRequest multi = null;
- try {
- multi = new MultipartRequest(request, saveDirectory, maxPostSize, encoding);
- } catch (Exception e) {
- System.out.println("发生异常:" + e.getMessage());
- return;
- }
- //图片预览功能实现
- String _result = "";
- Enumeration files = multi.getFileNames();
- while (files.hasMoreElements()) {
- String name = (String) files.nextElement();
- File f = multi.getFile(name);
- if (f != null) {
- String fileName = multi.getFilesystemName(name);
- String lastFileName = saveDirectory + "/" + fileName;
- result += multi.getOriginalFileName(name) + "," + savePath + "/" + fileName;
- }
- }
- outs.print(_result);
- }
注意:action方法返回的字符串为图片的名称和图片的路径。
3,SSH框架中使用
- package cn.com.zzcy.base.action;
- import java.io.File;
- @Namespace("/UploadAction")
- public class UploadAction {
- private File uploadify;
- public File getUploadify() {
- return uploadify;
- }
- public void setUploadify(File uploadify) {
- this.uploadify = uploadify;
- }
- private String uploadifyFileName;
- public String getUploadifyFileName() {
- return uploadifyFileName;
- }
- public void setUploadifyFileName(String uploadifyFileName) {
- this.uploadifyFileName = uploadifyFileName;
- }
- /**
- * 上传图片
- * @throws IOException
- */
- @Action("uploadImg")
- public void uploadImg(){
- HttpServletRequest request = ServletActionContext.getRequest();
- HttpServletResponse response = ServletActionContext.getResponse();
- String savePath = request.getSession().getServletContext().getRealPath("");
- PrintWriter out = null;
- String resultStr = "";
- String extName = "";// 扩展名
- String newFileName = "";// 新文件名
- try {
- response.setCharacterEncoding("utf-8");
- out = response.getWriter();
- //获取文件的扩展名
- if (uploadifyFileName.lastIndexOf(".") >= 0) {
- extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));
- }
- //根据当前时间生成新的文件名称
- String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());// 当前时间
- newFileName = nowTime + extName;
- //设置文件保存路径
- String param = request.getParameter("param");
- savePath = savePath + "/ImgUpload/"+param+"/";
- File file = new File(savePath);
- if(!file.exists()){
- file.mkdirs();
- }
- uploadify.renameTo(new File(savePath+newFileName));
- resultStr = uploadifyFileName+","+"/ImgUpload/"+param+"/"+newFileName;
- } catch (IOException e) {
- e.printStackTrace();
- }finally{
- out.print(resultStr);
- }
- }
- }
注意:要定义局部变量并提供set方法,这样图片的名称和信息才能自动注入进入。
这里通过request方法获取不到图片信息。。。
4,实现的效果图如下:
原文出自:http://blog.csdn.net/lishuangzhe7047/article/details/41803175
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。