文件上传插件Uploadify+Struts2 浅谈

wach52t

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

最近访客更多访客>>

xzeus

bondy

c_bai

allonzw

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript CSS jQuery IE XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><meta http-equiv="x-ua-compatible" content="ie=7" />

    <link href="../../css/example/css/default.css" rel="stylesheet" type="text/css" />
     <link href="../../css/example/css/uploadify.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" language="javascript" src="../../script/jquery-1.3.2.min.js" charset="GBK"></script>
     　<script type="text/javascript" language="javascript" src="../../script/swfobject.js"></script>
　<script type="text/javascript" language="javascript" src="../../script/jquery.uploadify.v2.1.4.js"></script>
　<script type="text/javascript" language="javascript" src="../../script/jquery.uploadify.v2.1.4.min.js"></script>


<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': '../../script/uploadify.swf',
'script': 'phT_test.do',
'cancelImg': '../../script/cancel.png',
'folder': 'photo',
'queueID': 'fileQueue',
'clieid':'clieid',
'auto': false,
'multi': true,
'fileExt':'*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
'fileDesc':'选择*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
'sizeLimit':'4000000',
'buttonText':'up',
'wmode':'transparent',
'removeCompleted' : false,
'fileDataName'   : 'fileInput',     //file的name,
'onSelect': function(e, queueId, fileObj){
    alert("唯一标识:" + queueId + "\r\n" +
          "文件名：" + fileObj.name + "\r\n" +
          "文件大小：" + fileObj.size + "\r\n" +
          "创建时间：" + fileObj.creationDate + "\r\n" +
          "最后修改时间：" + fileObj.modificationDate + "\r\n" +
          "文件类型：" + fileObj.type
    );
},
'onComplete': function (event, queueID, fileObj, response, data) {
    alert(fileObj.filePath);
    $('#address').appendTo('.files').text(response);
},
'onError': function(event, queueID, fileObj) {
    alert("文件:" + fileObj.name + "上传失败");
}
});
});
</script>

<script type="text/javascript">
                $(function() {
                $('#file_upload').uploadify({
                    'uploader': '../../script/uploadify.swf',
                    'script': 'phT_test.do',    // 后台action 为 .do 请求
                    'cancelImg': '../../script/cancel.png',
                    'folder': 'photo',
                    'auto': false,
                    'multi': false,
                    'fileExt':'*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
                    'fileDesc':'选择*.jpg;*.jpeg;*.gif;*.png;*.bmp;',
                    'sizeLimit':'4000000',
                    'buttonText':'File',
                    'wmode':'transparent',
                    'removeCompleted' : false,
                    'fileDataName'   : 'fileInput',     //file的name,
                    'onComplete': function (event, queueID, fileObj, response, data) {
                        $("#address").val(fileObj.filePath); // 这里是返回图片地址的一个属性。保存到表中

                        },
                    'onError': function(event, queueID, fileObj) {
                        alert("文件:" + fileObj.name + "上传失败");
                    },
                    'onCancel': function(event, queueID, fileObj){
                        alert("取消" + fileObj.name);
                    }
                    });
                    });
                </script>

<body>
<html>
单个文件上传
       <div class="demo-box">
                            <input id="file_upload" type="file" name="fileInput" />
                            <p><a href="javascript:$('#file_upload').uploadifyUpload()">上传</a></p>
                        </div>
                        <input value="${address }" name="address" id="address" type="text"/>

多个文件上传
                        <div id="fileQueue" class="fileQueue"></div>
                            <input type="file" name="fileInput" id="uploadify" />
                            <p><a href="javascript:$('#uploadify').uploadifyUpload()">上传</a></p>



</body>
</html>

默认的CSS 文件加入以下CSS样式（官网demo 中的基本样式）

#basic-demo .uploadifyQueueItem {
background-color: #F5F5F5;
border: 2px solid #E5E5E5;
font: 11px Verdana, Geneva, sans-serif;
margin-top: 5px;
padding: 10px;
width: 350px;
}
#basic-demo .uploadifyError {
background-color: #FDE5DD !important;
border: 2px solid #FBCBBC !important;
}
#basic-demo .uploadifyQueueItem .cancel {
float: right;
}
#basic-demo .uploadifyQueue .completed {
background-color: #E5E5E5;
}
#basic-demo .uploadifyProgress {
background-color: #E5E5E5;
margin-top: 10px;
width: 100%;
}
#basic-demo .uploadifyProgressBar {
background-color: #0099FF;
height: 3px;
width: 1px;

后台action

public class PhotoAction extends ActionBaseWach{

    private File fileInput;
    private String fileInputFileName;
    private String fileInputContentType;
    private String folder;



    //set .get 略....

        public String textajax(){
            return "textajax";
        }


       public String test() {
           ctx = ActionContext.getContext();
           HttpServletResponse sd = ServletActionContext.getResponse();
            sd.setContentType("GBK");

           String path=ServletActionContext.getServletContext().getRealPath("/");
              File fd=new File(path+folder);   //floder就是js中配置的floder,这里要提供个String属性的floder,病get,set
              if(!fd.exists()){
                 fd.mkdir();
              }
              try {
            FileUtils.copyFile(fileInput, new File(fd ,fileInputFileName));
            sd.getWriter().print(fileInputFileName+"上传成功");
              } catch (IOException e) {
                e.printStackTrace();
              }

           return null; //这里不需要页面转向，所以返回空就可以了
        }