Jquery 的ajax实现文件上传，校验。

最新推荐文章于 2021-06-09 19:35:47 发布

着实着迷

最新推荐文章于 2021-06-09 19:35:47 发布

阅读量654

点赞数 1

分类专栏：我自己的学习笔记

本文链接：https://blog.csdn.net/sgl520lxl/article/details/78457664

版权

我自己的学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Html代码：

<div align="center">
		 <form id="uploadForm">
	            <input type="file" id="file" name="file"/>
	            <br/> 
	            <br/>
	   		    <div class="iDate date">
					<input type="text" id="datetime" name="datetime">
				<button type="button" class="addOn"></button>
				</div>
				<br/>
	            <br/>
				<input type="button" id="button" value="比较"/> 
	    </form>
	    <br/> 
	    <br/>
	    <p id="result" > </p>
</div>

Js代码：

$("#button").click(function(){ 
        
    	var obj = document.getElementById('file');
    	if(obj.value=='')
    	{
    		alert('请选择要核对的微信文件');
    		return;
    	}
    	var stuff=obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];
    	if(stuff!='csv')
    	{
    		alert('文件类型不正确，请选择.csv文件');
    		return;
    	}
    	//获取文件名
    	var file = document.getElementById('file').files;
    	var filename = file[0].name;
    	
    	//获取选择的时间
    	var datetime = $("#datetime").val();
    	var strs= new Array(); //定义一数组
    	strs = datetime.split("-"); //字符分割
    	/* alert(strs[1]);
    	alert(strs[2]);  */
    	
    	if(filename.indexOf(strs[1]) < 0 || filename.indexOf(strs[2]) < 0){
    		alert("请选择和文件相对应的核对时间！");
    		return;
    	}
    	
    	var test = window.location.href;
    	var url = test.indexOf("?");
    	if(url == -1){
    		alert(test);
    	}else{
    		test = test.substr(0,url);
    		alert(test);
    	}
    	
    	var formData = new FormData();
        formData.append("myfile", document.getElementById("file").files[0]);
        formData.append("datetime", datetime);
    	$.ajax({
    	    url:test+'/ToCheck',
    	    type: 'POST',
    	    cache: false,
    	    data: formData,  
    	    processData : false,
    		contentType : false,
    	    success : function(jsonResponse) {
    	    	alert(jsonResponse.returnMessage);
    	    	/* $("#result").text(jsonResponse.returnMessage); */
    	    	$("#result").html(jsonResponse.returnMessage);
    	    }, 
   	    	error : function(jsonResponse) {
   	    		alert("核对出错！！");
   	    	} 
    	});
    	
 });

后台接收：

        @SuppressWarnings("unchecked")
	@RequestMapping(value = "/ToCheck")
	@ResponseBody
	public JsonResponse onFind(@RequestParam(value = "myfile", required = false)MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
		
		JsonResponse jsonResponse = new JsonResponse();
		jsonResponse.setReturnType(0);
		String fileName = file.getOriginalFilename();
		System.out.println(fileName);
		
		String datetime = request.getParameter("datetime");
		System.out.println(request.getParameter("datetime"));
		
		CommonsMultipartFile cFile = (CommonsMultipartFile) file;
        DiskFileItem fileItem = (DiskFileItem) cFile.getFileItem();
        InputStream inputStream = fileItem.getInputStream();
        FileInputStream fin = null;
	    // 如果是FileInputStream类型，进行转换
        if (inputStream instanceof FileInputStream) {
        	System.out.println("1111");
            fin = (FileInputStream) inputStream;
        }
        
        if(fin != null){
        	try {
        		jsonResponse.setReturnMessage(testCheck(datetime, fin));
			} catch (Exception e) {
				e.printStackTrace();
			}
        }else{
        	jsonResponse.setReturnMessage("上传的文件无法解析");
        }
        
        System.out.println(jsonResponse.getReturnMessage());
		return  jsonResponse;
		
	}