多文件上传

来源：互联网发布：罗马2全面战争修改数据编辑：程序博客网时间：2024/06/17 02:47

最近一直在做公司产品在线贴吧的多文件上传，虽然功能还没有完全做完，但是基本技术难题已经解决，现归纳总结如下：

一、使用struts2 + org.apache.commons.fileupload，在Action中

ActionContext ac = ActionContext.getContext();  
       HttpServletRequest request = (HttpServletRequest) ac.get       (ServletActionContext.HTTP_REQUEST);  
       HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE);  
 
       upload.parseRequest(request);

这里upload.parseRequest(request);获不到值，原因为Struts2的过滤器将request过滤，从而改变了request的类型：

<filter> 
 <filter-name>struts2</filter-name> 
 <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> 
</filter> 
<filter-mapping> 
 <filter-name>struts2</filter-name> 
 <url-pattern>/*</url-pattern> 
</filter-mapping>

解决方法有两种：

1：WEB-INFO的web.xml中将struts2过滤器的配置改为：

<filter> 
  <filter-name>struts2</filter-name> 
  <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> 
 </filter> 
 <filter-mapping> 
  <filter-name>struts2</filter-name> 
  <url-pattern>*.action</url-pattern> 
 </filter-mapping>

这种方法在我的项目中没有成功；

2：自己写一个过滤器：配置在sturts2的过滤器配置之前

<filter> 
        <filter-name>PersonalFilter</filter-name> 
        <filter-class>com.huarui.web.servlet.PersonalFilter</filter-class> 
    </filter> 
    <filter-mapping> 
        <filter-name>PersonalFilter</filter-name> 
        <url-pattern>/user/postbar/BarUpload.action</url-pattern> 
    </filter-mapping>

public class PersonalFilter implements Filter {  
 
    public void destroy() {  
          
    }  
 
    public void doFilter(ServletRequest request, ServletResponse response,  
            FilterChain chain) throws IOException, ServletException {  
        chain.doFilter(new StrutsRequestWrapper((HttpServletRequest) request), response);     
    }  
 
    public void init(FilterConfig arg0) throws ServletException {  
        // TODO Auto-generated method stub  
          
    }  
 
}

注意映射的路径，主要是过滤这次请求，将request转型为StrutsRequestWrapper，获取值成功！

二、前台JS触发<input type='file'/>的onclick事件，在提交前input值清空，这是IE的安全机制，本身无法解决，但通过以下代码变相解决：

<HTML> 
    <BODY> 
        <div id="tt" style="position:relative;"> 
            <input type="button" value="添加附件" onmouseover="floatFile()"> 
            <br> 
            <div id="div1"> 
                <div id="file1text" ></div><input id="file1" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=50);width:30px;" hidefocus> 
            </div> 
        </div> 
        </p> 
        <input type="button" onclick="alert($('tt').innerHTML)" value="showHTML"> 
    </BODY> 
</HTML> 
<SCRIPT LANGUAGE="JavaScript"> 
    function $(id)  
    {  
        return document.getElementById(id);  
    }  
    //全局变量，记录文件数；  
    var fileNum=1;  
    //mouseover时，把input file移到按扭上，保证点击的是file，  
    function floatFile()  
    {      
        $("file"+fileNum).style.posTop=event.srcElement.offsetTop;  
        $("file"+fileNum).style.posLeft=event.x-$("file"+fileNum).offsetWidth/2;  
    }  
    //选择完一个文件之后，自动创建一个新的div 和 file表单，用于下回使用，hidden刚用过的file  
    function showText(obj)  
    {  
        $(obj.id+"text").innerHTML=obj.value+"&nbsp;&nbsp;<a href='javascript:del("+fileNum+")'>删除</a>";  
        $("file"+fileNum).style.display='none';  
        fileNumfileNum=fileNum+1;  
        //直接追加innerHTML(innerHTML+=)会清空原来file中的内容  
        $("div"+(fileNum-1)).insertAdjacentHTML('AfterEnd','<div id="div'+fileNum+'"><div id="file'+fileNum+'text" ></div><input id="file'+fileNum+'" name="myfile" type="file"  onchange="showText(this)"  style="position:absolute;filter:alpha(opacity=0);width:30px;"hidefocus></div>');  
    }  
    function del(id)  
    {  
        $("div"+id).innerHTML="";  
        $("div"+id).style.display="none";  
    }  
 
</SCRIPT>

画面难看但功能实现！

本文出自 “希望家园” 博客，请务必保留此出处http://dyq0908.blog.51cto.com/4347597/854881

0 0