Iframe仿Ajax异步上传文件(图片)

JSP：

     上传图片 

     
     

JS：

File控件imgFile选中文件时触发该事件，mainForm提交表单上传图片，结果（上传成功的图片显示、失败提示）在imgIframe中显示，除imgFrame之外的页面不用刷新，从而达到类似Ajax的效果

$(document).ready(function(){
	$("#imgFile").bind("change",function(){
		document.getElementById("mainForm").action="FileAction!uploadImage.action";
		document.getElementById("mainFormrm").target = "imgIframe";
		document.getElementById("mainFormrm").submit();
	});
});

FileAction!uploadImage.action：

这里用的是struts2

public class FileAction{
    // 用来封装上传的文件  
    private File imgFile;  
    // 用来封装上传文件的类型  
    private String imgFileContentType;    
    // 用来封装上传文件的文件名  
    private String imgFileFileName;
    //get,set方法省略 ...
   
   /**
     * 上传图片
     * @return
     */
    public String uploadImage(){
        
        //服务器存放的路径
        String realPath = "/var/www/upload";
        //服务器路径realPath对应的url地址
        String url = "http://www.myimg.com";
        
        String image_url = "";
        try {
            int m = this.getImgFileFileName().lastIndexOf(".");
            
            String imgType = this.getImgFileFileName().substring(m+1,this.getImgFileFileName().length()).toLowerCase();
            
            if(!"#jpg#jpeg#gif#png#bmp#icon#".contains(("#"+imgType+"#"))){
                this.request.setAttribute("err_msg","只支持jpg|jpeg|gif|png|bmp|icon格式图片文件!"+image_url);
                return "upload_image";
            }
            
            //基于myFile创建一个文件输入流  
            InputStream is = new FileInputStream(imgFile); 
            
            int the_size = 50;
            
            //文件大小(k)
            int size = is.available()/1024;
            if(size>the_size){
                this.request.setAttribute("err_msg","文件过大("+String.valueOf(the_size)+"k以内)!"+image_url);
                return "upload_image";
            }
            
            String newFileName = "new_imag"+"."+imgType;
            
            //图片保存路径不存在,则创建
            File dir = new File(realPath);
            if(!dir.exists()){
                dir.mkdirs();
            }
              
            // 设置目标文件  
            File toFile = new File(realPath, newFileName); 
            
            image_url =  url + File.separator + newFileName;
              
            // 创建一个输出流  
            OutputStream os;
            
            os = new FileOutputStream(toFile);
            //设置缓存  
            byte[] buffer = new byte[1024];  
      
            int length = 0;  
      
            //读取myFile文件输出到toFile文件中  
            while ((length = is.read(buffer)) > 0) {
                os.write(buffer, 0, length);  
            }  
            //关闭输入流  
            is.close();  
              
            //关闭输出流  
            os.close();  
        
        } catch (Exception e) {
            this.request.setAttribute("err_msg","上传文件失败!");
            return "upload_image";
        }  
  
        this.request.setAttribute("url",image_url);
        return "upload_image";
    }


 }

结果（url, err_msg）显示在upload_image.jsp中，怎么做 你懂的！

总结：

原理就是提交主Form上传文件，结果显示在主Form里面的一个Iframe里，这样不用整个页面都刷新，从而达到类似Ajax的效果。