ajax异步上传图片并显示

一、需要的js插件ajaxfileupload.js，源代码见下：

jQuery.extend({
	

    createUploadIframe: function(id, uri)
	{
			//create frame
            var frameId = 'jUploadFrame' + id;
            
            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean'){
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string'){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';

            document.body.appendChild(io);

            return io			
    },
    createUploadForm: function(id, fileElementId)
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		//set attributes
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(form).appendTo('body');		
		return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
		var form = jQuery.createUploadForm(id, s.fileElementId);
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;		
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
		{
			jQuery.event.trigger( "ajaxStart" );
		}            
        var requestDone = false;
        // Create the request object
        var xml = {}   
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
		{			
			var io = document.getElementById(frameId);
            try 
			{				
				if(io.contentWindow)
				{
					 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                	 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
					 
				}else if(io.contentDocument)
				{
					 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                	xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
				}						
            }catch(e)
			{
				jQuery.handleError(s, xml, null, e);
			}
            if ( xml || isTimeout == "timeout") 
			{				
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
					{
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );    
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );
    
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e) 
				{
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if ( s.complete )
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function()
									{	try 
										{
											$(io).remove();
											$(form).remove();	
											
										} catch(e) 
										{
											jQuery.handleError(s, xml, null, e);
										}									

									}, 100)

                xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 ) 
		{
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try 
		{
           // var io = $('#' + frameId);
			var form = $('#' + formId);
			$(form).attr('action', s.url);
			$(form).attr('method', 'POST');
			$(form).attr('target', frameId);
            if(form.encoding)
			{
                form.encoding = 'multipart/form-data';				
            }
            else
			{				
                form.enctype = 'multipart/form-data';
            }			
            $(form).submit();

        } catch(e) 
		{			
            jQuery.handleError(s, xml, null, e);
        }
        if(window.attachEvent){
            document.getElementById(frameId).attachEvent('onload', uploadCallback);
        }
        else{
            document.getElementById(frameId).addEventListener('load', uploadCallback, false);
        } 		
        return {abort: function () {}};	

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
			//alert($('param', data).each(function(){alert($(this).attr('value'));}));
        return data;
    }
})

二、页面部分

添加<script type="text/javascript" src="../js/jquery-1.4.js"></script>

添加 <script type="text/javascript" src="../js/ajaxfileupload.js"></script>

需要3个标签

1、用于展示图片：<img  id="pic_target" src="">

2、文件选择：<input type="file" id="file_pic" name="file" οnchange="return ajaxFileUpload(this.id,'pic_target','pic_hidden','heads');" style="width: 140px;"/>

3、用于保存路径的隐藏标签：<input  type="text" id="pic_hidden" name="pic_hidden" style="display: none;"/>

三、页面的js部分

/**
	方法说明： ajax异步上传图片文件并实时显示
	参数说明：
	fileElementId：文件上传空间的id属性 <input type="file" id="file" name="file" />
	imgTargetId：用于显示上传的图片的img标签的id
	imgHiddenId:一个用于存放上传图片的路径的隐藏的input标签 <input  type="text" id="pic_hidden" name="pic_hidden" style="display: none;"/>
	saveDir:图片保存在服务器上某个文件夹的名称，如heads(用来存放员工头像)
	*/
	var arr_filetype = ["jpg","png","jpeg","JPG","PNG","JPEG"];//支持的图片类型
    function ajaxFileUpload(fileElementId,imgTargetId,imgHiddenId,saveDir){
		//判断上传文件类型是否是图片类型
		var filetype = $("#"+fileElementId).val().split(".")[1];
		var num = arr_filetype.indexOf(filetype);//存在返回1，不存在返回-1
        if(num == "-1"){
        	alert("请选择"+arr_filetype.join(",")+"类型的图片文件！"); 
        	return false;
        } 
        $.ajaxFileUpload
        (
            {
                url:'fileUploadAction.action?saveDir='+saveDir,//用于文件上传的服务器端请求地址
                secureuri:false,//一般设置为false
                fileElementId:fileElementId,//文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'json',//返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    //alert(data.fileFileName);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
                    $("#"+imgTargetId).attr("src","<%=path%>"+"/"+saveDir+"/"+data.fileFileName);
                    //将上传的图片路径（这里是相对服务器根路径的路径 ）暂存在该隐藏标签的value中，
                    $("#"+imgHiddenId).val("/"+saveDir+"/"+data.fileFileName);
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != ''){
                            alert(data.error);
                        }else{
                            alert(data.message);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        return false;
    }

四、java后台部分

两个类

1.FileAction

注意：

 private File file;这里的file要和页面中<input type="file" name="file"/>的name属性设置一致。

package action.communication;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.PrintWriter;
import java.util.Map;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.interceptor.SessionAware;
import org.apache.struts2.util.ServletContextAware;

import util.fileutil.FileUtil;

import com.opensymphony.xwork2.ActionSupport;
/**
 * 处理ajax上传文件
 * @author mihoo
 *
 */
public class FileAction extends ActionSupport implements ServletRequestAware ,ServletResponseAware,SessionAware,ServletContextAware{
	   private File file;
	    private String fileFileName;
	    private String fileFileContentType;

	    private String message = "你已成功上传文件";
	    
	    private HttpServletRequest request;
		private HttpServletResponse response;
		private Map<String, Object> session;
		private ServletContext context;
		private PrintWriter out;

		@Override
		public void setServletRequest(HttpServletRequest request) {
			// TODO Auto-generated method stub
			this.request=request;
			
		}

		@Override
		public void setServletResponse(HttpServletResponse response) {
			// TODO Auto-generated method stub
			this.response=response;
			
		}

		@Override
		public void setSession(Map<String, Object> session) {
			// TODO Auto-generated method stub
			this.session=session;
		}

		@Override
		public void setServletContext(ServletContext context) {
			// TODO Auto-generated method stub
			this.context=context;
		}
	    public String getMessage() {
	        return message;
	    }

	    public void setMessage(String message) {
	        this.message = message;
	    }

	    public File getFile() {
	        return file;
	    }

	    public void setFile(File file) {
	        this.file = file;
	    }

	    public String getFileFileName() {
	        return fileFileName;
	    }

	    public void setFileFileName(String fileFileName) {
	        this.fileFileName = fileFileName;
	    }

	    public String getFileFileContentType() {
	        return fileFileContentType;
	    }

	    public void setFileFileContentType(String fileFileContentType) {
	        this.fileFileContentType = fileFileContentType;
	    }

	    @SuppressWarnings("deprecation")
	    @Override
	    public String execute() throws Exception {
	        String saveDir = request.getParameter("saveDir");
	        String path = ServletActionContext.getRequest().getRealPath("/"+saveDir);
	        //如果文件夹不存在则创建    
	        FileUtil.createDirectory(path);
	        try {
	            File f = this.getFile();
	            if(this.getFileFileName().endsWith(".exe")){
	                message="对不起,你上传的文件格式不允许!!!";
	                return ERROR;
	            }
	            FileInputStream inputStream = new FileInputStream(f);
	            FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
	            byte[] buf = new byte[1024];
	            int length = 0;
	            while ((length = inputStream.read(buf)) != -1) {
	                outputStream.write(buf, 0, length);
	            }
	            inputStream.close();
	            outputStream.flush();
	        } catch (Exception e) {
	            e.printStackTrace();
	            message = "对不起,文件上传失败了!!!!";
	        }
	        return SUCCESS;
	    }
}

2、
FileUtil.java(这里只用到了第一个方法)

package util.fileutil;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.Reader;

/**
 * 有关文件操作的工具类
 * 
 * @author mihoo
 * 
 */
public class FileUtil {
	/**
	 * 判断文件夹是否存在，不存在创建文件夹
	 * 
	 * @param path
	 *            文件夹路径
	 */
	public static void createDirectory(String path) {
		File file = new File(path);
		// 如果文件夹不存在则创建
		if (!file.exists() && !file.isDirectory()) {
			//System.out.println("//不存在");
			file.mkdir();
		} else {
			//System.out.println("//目录存在");
		}
	}

	/**
	 * 判断文件是否存在，不存在创建文件
	 * 
	 * @param path
	 *            文件路径
	 */
	public static void createFile(String path) {
		File file = new File(path);
		if (!file.exists()) {
			try {
				file.createNewFile();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

	/**
	 * 判断两个文件的内容是否相同，文件名要用绝对路径
	 * 
	 * @param fileName1
	 *            文件1的绝对路径
	 * @param fileName2
	 *            文件2的绝对路径
	 * @return 相同返回true，不相同返回false
	 */
	public boolean isSameFile(String fileName1, String fileName2) {
		FileInputStream fis1 = null;
		FileInputStream fis2 = null;
		try {
			fis1 = new FileInputStream(fileName1);
			fis2 = new FileInputStream(fileName2);

			int len1 = fis1.available();// 返回总的字节数
			int len2 = fis2.available();

			if (len1 == len2) {// 长度相同，则比较具体内容
				// 建立两个字节缓冲区
				byte[] data1 = new byte[len1];
				byte[] data2 = new byte[len2];

				// 分别将两个文件的内容读入缓冲区
				fis1.read(data1);
				fis2.read(data2);

				// 依次比较文件中的每一个字节
				for (int i = 0; i < len1; i++) {
					// 只要有一个字节不同，两个文件就不一样
					if (data1[i] != data2[i]) {
						System.out.println("文件内容不一样");
						return false;
					}
				}
				System.out.println("两个文件完全相同");
				return true;
			} else {
				// 长度不一样，文件肯定不同
				return false;
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} finally {// 关闭文件流，防止内存泄漏
			if (fis1 != null) {
				try {
					fis1.close();
				} catch (IOException e) {
					// 忽略
					e.printStackTrace();
				}
			}
			if (fis2 != null) {
				try {
					fis2.close();
				} catch (IOException e) {
					// 忽略
					e.printStackTrace();
				}
			}
		}
		return false;
	}

	/**
	 * 以字符串形式返回文件内容
	 * 
	 * @param filePath
	 *            文件的绝对路径
	 * @return 返回字符串形式的文件内容
	 */
	public static String readFileByChars(String filePath) {
		Reader reader = null;
		StringBuffer sb = new StringBuffer();
		try {
			// System.out.println("以字符为单位读取文件内容，一次读多个字节：");
			// 一次读多个字符
			char[] tempchars = new char[1];
			int charread = 0;
			// 该文件存在
			reader = new InputStreamReader(new FileInputStream(filePath));
			// 读入多个字符到字符数组中，charread为一次读取字符数
			while ((charread = reader.read(tempchars)) != -1) {
				// 同样屏蔽掉\r不显示
				if ((charread == tempchars.length)
						&& (tempchars[tempchars.length - 1] != '\r')) {
					// System.out.print(tempchars);
				} else {
					for (int i = 0; i < charread; i++) {
						if (tempchars[i] == '\r') {
							continue;
						} else {
							// System.out.print(tempchars[i]);
						}
					}
				}
				sb.append(tempchars);
			}

		} catch (Exception e1) {
			e1.printStackTrace();
		} finally {
			if (reader != null) {
				try {
					reader.close();
				} catch (IOException e1) {
				}
			}
		}
		return sb.toString();
	}
}