纯js实现跨域上传文件

      最近在做一个项目，包含几个独立的子项目，都用到了图片上传的功能，因此把要把图片处理部分独立出来。

      因为子项目有的使用java，也有使用.net开发的，所以考虑到兼容性，直接采用js客户端来实现。而每个项目使用独立的一个端口，所以采用iframe方式解决js的跨域问题。
      原理：

     客户端打开一个模式窗口win1,win1通过iframe嵌套文件服务器上的上传页面。文件服务器在完成上传过重定向win1页面到客户端的另一个窗口win2，并带上上传后的文件实际访问路径参数，win2完成从url地址上获取文件地址，返回该地址并关闭模式窗口。

      实现：

     图片的上传服务器采用ssh框架，在图片服务器上建立一个图片上传页面供客户端嵌套,upload.html页面代码如下:

   
   
   
 
 
 http://${basePath}/fileService/uploadFile/uploadFileForOthers.action" method="post" enctype="multipart/form-data">
   
   
   
   
   

   
   
 

以上form的action地址为文件上传的实际地址，upload为上传的文件名,returnUrl为win2地址,其他两个可忽略，项目中用于上传图片的分类和安全机制。

图片上传action：uploadFileForOthers.class

public String uploadFileForOthers()
    {
        String pix = "?";
        if(returnUrl.indexOf("?")>0)
        {
            pix = "&";
        }
        //验证验证码
        String key = RSA.Dec_RSA(securityKey);
        if(System.currentTimeMillis() -(new Long(key)).longValue()>600000)
        {
            LOG.error("--------------------------------------------验证码不正确--------------------------------------------------");
            String script = "";
            PrintWriter out;
            try
            {
                out = ServletActionContext.getResponse().getWriter();
                out.println(script);
                out.flush();  
                out.close();
            }
            catch (IOException e)
            {
                LOG.error("--------------------------------------------提示用户出错--------------------------------------------------");
            }
             
        }
       
       
       
        LOG.error("-----------------开始保存"+typeFlag+"来源的文件---------------uploadFileName:"+uploadFileName+"---------------");

        try
        {
           
            if(uploadFileName!=null&&!uploadFileName.trim().equals("")&&fileUpload!=null)
            {
                String newFileName = fileUpload.createFileName();
                LOG.error("-------------------------------------------newFileName:"+newFileName+"------------------------------------");
                String projectPath =ServletActionContext.getServletContext().getRealPath("/"); 
                String url = fileUpload.uploadFile(upload, uploadFileName, typeFlag, newFileName,projectPath);
                String script = "";

//本句为关键，经测试ie6-ie8,火狐等都可成功。(原来采用parent.location来重定向时ie6-ie7可成功，火狐和ie8无法成功)
                PrintWriter out = ServletActionContext.getResponse().getWriter();
                out.println(script);
                out.flush();  
                out.close(); 
                LOG.error("--------------------------------------------保存成功--------------------------------------------------");
            }
        }
        catch (Exception e)
        {
            LOG.error(e.getMessage());
            String script = "";
            PrintWriter out;
            try
            {
                out = ServletActionContext.getResponse().getWriter();
                out.println(script);
                out.flush();  
                out.close();
            }
            catch (IOException e1)
            {
               
            }
        }
        LOG.error("--------------------------------------------结束--------------------------------------------------");
        return null;
    }

客户端:win1.html

客户端:win2.jsp

  <%
     String errorMsg = request.getParameter("errorMsg");
     if(errorMsg != null && errorMsg.trim().length()>0){
     %>
      
     <%}else{
    String url = request.getParameter("filename");
    if(url!=null && url.trim().length()>0){
    %>
    
    <%
    }else{
    
    }
   }
   %>

调用js

function openwin(){
    var url="win1.htm?rid=${rid}";
    var returnData=window.showModalDialog(url,window,"status:no;dialogWidth:200px;dialogHeight:150px;scroll:no;")
    if(returnData != undefined){
     dd(returnData);
    }
    //WO_LS( url, 400,200);
   }