纯js实现跨域上传文件

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

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

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

实现：

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

以上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 = "<script type='text/javascript'>window.parent.location='"+ returnUrl + pix+ "errorMsg=timeout'</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 = "<script type='text/javascript'>location='"+ returnUrl + pix+"filename="+ url + "'</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 = "<script type='text/javascript'>window.parent.location='"+ returnUrl + pix+ "errorMsg="+ e.getMessage() + "'</script>";
            PrintWriter out;
            try
            {
                out = ServletActionContext.getResponse().getWriter();
                out.println(script);
                out.flush();
                out.close();
            }
            catch (IOException e1)
            {

            }
        }
        LOG.error("-----------------------------�---------------结束--------------------------------------------------");
        return null;
    }

客户端:win1.html

<html>

<body>

</body>

<html>

客户端:win2.jsp

  <%
   String errorMsg = request.getParameter("errorMsg");
   if(errorMsg != null && errorMsg.trim().length()>0){
   %>
   <script type="text/javascript">
     alert("${param.errorMsg}");
     window.parent.window.close();
   </script>
   <%}else{
    String url = request.getParameter("filename");
    if(url!=null && url.trim().length()>0){
    %>
   <script type="text/javascript">
     window.parent.returnValue="${param.filename}";
     window.parent.window.close();
   </script>
   <%
   }else{

  }
}
   %>

调用js

秒客网

纯js实现跨域上传文件

相关文章