引用资源文件：
<script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/ajaxfileupload.js"></script>
二、实现代码：
<div style="background: #ff9c01; color: #FFF; font-size: 14px; font-family: Microsoft YaHei; padding: 3px 6px; margin-left: 8px;width: 80px;text-align: center;">
<a href="javascript:void(0);" onclick="tempUpLoadFile('pth','naPt','naSh','png,jpg');">上传文件</a>
</div>
<span id="naSh"></span>
<input type="hidden" id="pth"/>
<input type="hidden" id="naPt"/>
<jsp:include page="/WEB-INF/jsp/common/uploadTemp.jsp"/>
三、uploadTemp.jsp 实现代码：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<script type="text/javascript">
/* js/ajaxfileupload.js */
/**
* 上传文件控件
* filePath :input 保存上传到服务器文件的路径
* fileName :input 保存文件名称
* fileNameShow :span 要显示上传文件的名称
* checkFileType : 要上传文件的类型,逗号分隔
*/
var path,name,nameShow,chckFiName;
function tempUpLoadFile(filePath,fileName,fileNameShow,checkFileType) {
path = filePath;
name = fileName;
chckFiName = checkFileType;
if(fileNameShow != undefined){
nameShow = fileNameShow;
}
$("#fileTempId").val();
$("#fileTempId").click();
}
/**
* JS 上传回调函数，可重写
*/
function callBackJs(filePath,fileName){
$("#"+path).val(filePath);
$("#"+name).val(fileName);
$("#"+nameShow).text(fileName);
}
function checkUploadFileType(){
//上传文件全路径
var filepath = $("#fileTempId").val();
var dotIndex = filepath.lastIndexOf(".");
//文件没有后缀时，进行提示
if (-1 == dotIndex){
alert('格式仅限于' + chckFiName + ',请重新选择。');
return false;
}
var suffix = filepath.substring(dotIndex+1,filepath.length).toLowerCase(); //文件后缀
var chckFiNames = chckFiName.split(",");
var isLegal = false;
for (var i = 0; i < chckFiNames.length; i++){
if (suffix == chckFiNames[i]){
isLegal = true;
break;
}
}
if(!isLegal){
alert('文件格式仅限于' + chckFiName + ',请重新选择。');
return false;
}
return true;
}
function fileSubmit() {
if(checkUploadFileType()){
$.ajaxFileUpload({
url : '<%=basePath%>file/uploadImage.do',//用于文件上传的服务器端请求地址
type:'post',async : true,secureuri : false,//是否启用安全提交一般设置为false
fileElementId : 'fileTempId',//文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType : 'json',//返回值类型 一般设置为xml,script,json,html
success : function(data,status) {
if(data.success == 'success'){
callBackJs(data.msg,data.fileName);
}else{
alert("上传文件出错啦!"+e);
}
},error:function(data,status,e){
alert("网络连接错误!"+e);
}
});
}
}
</script>
<span id="showProcess"></span>
<input style="display: none" type="file" id="fileTempId" name="file" onchange="fileSubmit()"/>
package com.company.common.baseAction; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.Socket; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.commons.io.IoUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; /** * Title FileUntilAction.java * Description 文件工具操作类 * Author XXXX * Date 2016-2-25 下午02:47:23 * Version V1.0 */ @Controller @RequestMapping("/file") public class FileUntilAction { @ResponseBody @RequestMapping(value = "/uploadImage",method = RequestMethod.POST) public Map<String,Object> loginEnhome(HttpServletRequest request,HttpServletResponse response) { System.out.println("上传文件开始。。。。。。。"); InputStream is = null; Socket socket = null; OutputStream os = null; InputStream sis = null; String path = ""; Map<String,Object> content = new HashMap<String,Object>(); try { String serverIp = "127.0.0.1"; int port = 8457 ; if (serverIp.equals("")) { content.put("success",false); content.put("msg","没有配置图片服务器IP！"); return content; } DiskFileItemFactory dff = new DiskFileItemFactory(); ServletFileUpload fileUpload = new ServletFileUpload(dff); List<FileItem> fileItems = fileUpload.parseRequest(request); if (fileItems.size()==0) { System.out.println("没有文件上传！"); content.put("success","没有文件上传！"); return content; } // 获取图片参数 is = fileItems.get(0).getInputStream(); long size = is.available(); String fileName = fileItems.get(0).getName(); String fileType= fileName.substring(fileName.indexOf(".")+1,fileName.length()); String uploadName = fileName.substring(fileName.lastIndexOf("\\")+1,fileName.length()); // 请求参数 StringBuffer params = new StringBuffer(); params.append("cmd:upload\r\n"); params.append("name:" + 88 + "_" + 88 + "\r\n"); params.append("type:" + fileType +"\r\n"); params.append("size:" + size + "\r\n"); params.append("\r\r\n"); // 发起SOCKET请求 socket = new Socket(serverIp,port); os = socket.getOutputStream(); os.write(params.toString().getBytes("GBK")); os.flush(); sis = socket.getInputStream(); byte[] result = new byte[10240]; sis.read(result,1024); System.out.println("首次：" + IoUtils.toString(result,"UTF-8")); // 上传文件 byte[] data = new byte[10240]; int read = 0; while ((read = is.read(data)) != -1) { os.write(data,read); } socket.shutdownOutput(); // 解析请求结果 sis.read(result,1024); String uploadResult = IoUtils.toString(result,"UTF-8"); System.out.println("第二次：" + uploadResult); String[] uplpads = uploadResult.split("\r\n"); for (String r : uplpads) { if (r.contains("path")) { path = r.replace("path:","").replaceAll("\\r","").replaceAll("\\n","").trim(); } } content.put("success","success"); content.put("msg",path); content.put("fileName",uploadName); } catch (Exception e) { System.out.println("上传文件失败！！"+e); content.put("success","fail"); content.put("msg","图片上传失败！"); } finally { IoUtils.closeQuietly(os); IoUtils.closeQuietly(is); IoUtils.closeQuietly(sis); try { socket.close(); } catch (IOException e) { System.out.println("Socket关闭失败！"+ e); } } System.out.println("content:"+content); return content; } }
点击上传按钮图标后，直接弹出上传框，选择文件后，后台直接上传，并在前台显示上传文件名称：
注意：后台使用的是ServletFileUpload 方法，在使用springMVC 或 struts 时，一定要删除或重写ServletFileUpload 中的上传方法， 否则因为fileUpload.parseRequest(request) 方法获取不到上传文件，因为在源码ServletFileUpload 中已经存在此方法，有重复出现。
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />方法2，重写此方法
运用ajaxUploadFile上传，有点不好，无法获取上传进度信息，重写方法后，设置文件监听可获取进度，此处待后期更新
原文链接：https://www.f2er.com/ajax/162372.html