一、需要的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",s] );
} else
jQuery.handleError(s,status);
} catch(e)
{
status = "error";
jQuery.handleError(s,status,e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete",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,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,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" onchange="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,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,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(); } }原文链接：https://www.f2er.com/ajax/165353.html
