纯js实现跨域上传文件

时间:2022-08-29 18:43:57

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

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

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

 

      实现:

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

<html>
  <head>
    <title>test.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
 <form action="
http://${basePath}/fileService/uploadFile/uploadFileForOthers.action" method="post" enctype="multipart/form-data">
    <input id="upload" type="file" size="15" name="upload" class="input" >
    <input name="returnUrl" value="${param.returnUrl}" type="hidden"/>
    <input name="typeFlag" value="${param.typeFlag}" type="hidden"/>
    <input name="securityKey" value="${param.securityKey}" type="hidden"/>
    <br>
    <input type="submit" value="upload" >
    </form>
  </body>
</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>

 <iframe src="http://${KEY_FILESERVICE}/fileService/fileupload.jsp?typeFlag=webimg&actionUrl=${KEY_FILESERVICE}&securityKey=${minwen}&returnUrl=<%=basePath %>win2.jsp?rid=${param.rid}" frameborder="0" scrolling="no" marginwidth="0" border-style: none></iframe>

</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

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);
   }