uploadify使用详细步骤

超声波

浏览: 61824 次
性别:
来自: 北京

最近访客更多访客>>

Ralf

xubukang

examine5191

hbyufan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

uplodify js webwork

webwork下uplodify的使用步骤：
1.修改web.xml文件中的拦截器配置，如下：

<filter>
<filter-name>webwork</filter-name>
<filter-class>com.opensymphony.webwork.dispatcher.FilterDispatcher</filter-class>
</filter>

<filter-mapping>
<filter-name>webwork</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>

2.在类路径下的webwork.properties中修改有关上传功能的配置，如下：

### multipart setting
webwork.tag.altSyntax = true
webwork.multipart.saveDir=javax.servlet.context.tempdir
webwork.multipart.maxSize=2097152
webwork.multipart.parser=jakarta

3.新建以xwork_upload.xml配置文件，文件内容如下：

<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.1.1//EN" "http://www.opensymphony.com/xwork/xwork-1.1.1.dtd">

4.将刚刚新建的xwork_upload.xml配置文件引入到xwork.xml配置文件中

5.根据配置文件新建net.survey.admin.UploadAction，内容如下：

public class UploadAction extends ActionSupport implements ServletRequestAware, ServletResponseAware{
    private HttpServletRequest request;
    private HttpServletResponse response;

    private File images;    //和在JS中指定的fileObjName的值相同
    private String imagesFileName;    //[fileName]FileName    获得上传文件的名称
    private String imagesContentType;//[fileName]ContentType 获得上传文件的类型

public String doImageUpload() throws Exception {
  upload("img", imagesFileName, images);
  return null;
}

public void upload(String dir, String name, File file) throws Exception{
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html; charset=utf-8");
  String savePath = new String(request.getServletContext().getRealPath("/") + "\\upload\\" + dir);
  if(!new File(savePath).exists())new File(savePath).mkdirs();
  String file_name = new SimpleDateFormat("yyyy-MM-dd HH.mm.ss").format(new Date()) + "_" + new String(name.getBytes("gbk"), "UTF-8"); // 唯一且不重复的文件名
  //文件名形如：ID.文件后缀
  FileOutputStream fos = new FileOutputStream(savePath + "\\" + file_name);
  FileInputStream fis = new FileInputStream(file);
  Streams.copy(fis, fos, true);
  /*byte[] buffer = new byte[1024];
  int len = 0;
  while ((len = fis.read(buffer)) > 0) {
   fos.write(buffer, 0, len);
  }
  fos.close();
  fis.close();*/
  PrintWriter out = response.getWriter();
  //这个地方不能少，否则前台得不到上传的结果
  out.write("1");
  out.close();
}

@Override
public void setServletResponse(HttpServletResponse response) {
  this.response = response;
}

@Override
public void setServletRequest(HttpServletRequest request) {
this.request = request;
}

public File getImages() {
return images;
}

public void setImages(File images) {
this.images = images;
}

public String getImagesFileName() {
return imagesFileName;
}

public void setImagesFileName(String imagesFileName) {
this.imagesFileName = imagesFileName;
}

public String getImagesContentType() {
return imagesContentType;
}

public void setImagesContentType(String imagesContentType) {
this.imagesContentType = imagesContentType;
}
}

6.建立jsp页面，内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试CRUD</title>
<link href="../uploadify/uploadify.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../uploadify/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript" src="../uploadify/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#images").uploadify({
        /*注意前面需要书写path的代码*/
        'uploader'       : '<%=basePath%>uploadify/uploadify.swf',
        'script'         : '<%=basePath%>upload/doImageUpload.action',
        'cancelImg'      : '<%=basePath%>uploadify/cancel.png',
        'folder'         : '<%=basePath%>upload/img',
        'queueID'        : 'imageQueue', //和存放队列的DIV的id一致
        'fileDataName'   : 'images', //和以下input的name属性一致
        'removeCompleted': false,
        'auto'           : false, //是否自动开始
        'multi'          : true, //是否支持多文件上传
        'buttonText'     : '选择图片', //按钮上的文字
        'simUploadLimit' : 5, //一次同步上传的文件数目
        'sizeLimit'      : 2097152, //设置单个文件大小限制2M
        'queueSizeLimit' : 5, //队列中同时存在的文件个数限制
        'fileDesc'   : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
        'fileExt'   : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
        'onAllComplete' :function(event,data)
  {
   $('#img_result').html(data.filesUploaded +'个图片上传成功');
  },
  onError: function(event, queueID, fileObj) {
   alert("图片:" + fileObj.name + "上传失败");
  },
  onCancel: function(event, queueID, fileObj){
   // alert("取消了" + fileObj.name);
  }
    });
});
</script>
</head>
<body>
<div style="width:800px; height:600px; border:1px solid red; margin:0px auto;">
  <form action="<%=request.getContextPath() %>/xxx.action" method="post">
   <table>
    <tr><td class="td_right">图片：</td>
     <td>
      <input type="file" name="images" id="images"/>
      <a href="javascript:;" onClick="javascript:$('#images').uploadifyUpload()">开始上传</a> <a href="javascript:jQuery('#images').uploadifyClearQueue()">取消所有上传</a> <span id="img_result" style="font-size: 13px;color: red"></span>
      <div id="imageQueue"></div>
     </td>
    </tr>
   </table>
  </form>
</div>
</body>
</html>

说明：该附件中的uploadify插件已经修复了buttonText不支持中文这一bug。

uploadify.rar (47.6 KB)
下载次数: 1

分享到：

解决OFBiz中利用JQuery自动补全下拉框无法 ... | Linux服务器安装Mysql的步骤

2015-03-09 12:06
浏览 694
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论