ajaxFileUpload 无刷新文件上传

引用资源文件：

<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 中已经存在此方法，有重复出现。

解决办法1，删除配置文件

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

方法2，重写此方法

运用ajaxUploadFile上传，有点不好，无法获取上传进度信息，重写方法后，设置文件监听可获取进度，此处待后期更新

ajaxFileUpload 无刷新文件上传

猜你在找的Ajax相关文章