HTTP Status 403 - Invalid CSRF Token 'null'

目录

  • 文件上传
    • 修改前
      • jsp
    • 请求实现
    • 修改后

文件上传

前后分离: 出现的问题 ! 
Status 403-forbidden Type Status Report Message Invalid CSRF Token 'null'

修改前

jsp

#伪码 js

<table style="width: 100%; font-size:12px;" border="0">
	<tr>
		<tdalign="left" style="padding-left: 10px;height:25px;width: 99%">附件:
		<!-- 主要部分 -->
		<input id="handle_file" onchange="checkFileType('handle_file')"  name="handle_file" type="file">
		<font color=red>支持格式:xls,xlsx,doc,docx,pdf,txt,jpg,gif,png,jpeg</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>最大附件100M</font></td>
	</tr>
</table>

请求实现

#可用 javascript
/**
 * 限制上传附件的类型、大小
 * 支持格式:xls,xlsx,doc,docx,image,pdf,txt
 * 支持大小:100M
 * @param objId为页面的id
 */
function checkFileType(objId){
	var fileSize = 100 * 1024 * 1024;// 字节
    //文件格式限制
    var fileName = $('#' + objId).val();
    if(fileName == undefined || fileName == null || fileName == ""){
        return;
    }
    if(fileName.indexOf("&") != -1 || fileName.indexOf("?") != -1){
    		$.messager.alert('温馨提示',"文件名中不能包含?和&符号!",'info');
		$('#' + objId).val("");
		return;
    }
    var fileFilter = "xls,xlsx,doc,docx,pdf,txt,jpg,gif,png,jpeg";
    var extention = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
    	if (fileFilter.indexOf(extention) < 0) {
    		$.messager.alert('温馨提示',"不支持 " + extention + " 为后缀名的文件!",'info');
    		$('#' + objId).val("");
    		return;
    	}
    //文件大小限制
    var fs = 0;
    try {
        if (window.ActiveXObject) {
            //IE浏览器
            var image = new Image();
            image.dynsrc = fileName;
            fs = image.fileSize;
        } else {
            fs = $('#' + objId)[0].files[0].size;
        }
    } catch(e) {
    }
    if (fs > fileSize) {
        $.messager.alert('温馨提示',"请上传 " + fileSize/1024/1024 +"MB以内的文件!",'info');
        $('#' + objId).val("");
        return;
    }
}

#伪码 javascript
var fileElementId = "handle_file";
$.ajaxFileUpload({
	url: basePath+"/submit",
	secureuri : false,
	dataType : 'json',
	fileElementId : fileElementId, 
	data:{
		k1: v1,
		k2: v2, 
	},
	success : function(resource)
	{
		
	}

修改后

#伪码 javascript
#new File([], '') File 空对象
var data = new FormData();
data.append("key","value");
data.append("handle_file", $('#handle_file')[0].files[0] : new File([], ''));
. 
. 
. 

$.ajax({
	type: "GET"/"POST",
	url: basePath+"/submit",
	data: data,
	success:function(resource){
		
	}
});
#伪码 Java Controller

@ResponseBody
@RequestMapping(value="/submit", produces = "text/html; charset=utf-8")
public String submitSJ(HttpServletRequest request, @RequestParam(required=false) CommonsMultipartFile handle_file) {
	if (!handle_file.isEmpty()) {
			logger.info("上传临时文件夹:" + path);
			File f = new File(path);
			if (!f.exists()) {// 判断目录是否存在,不存在则创建
				f.mkdirs();
			}
			FileOutputStream fos = new FileOutputStream(path + handle_file.getOriginalFilename());
			InputStream fis = handle_file.getInputStream();
			byte[] b = new byte[1024];
			int len = 0;
			while ((len = fis.read(b)) > 0) {
				fos.write(b, 0, len);
			}
			fos.close();
			fis.close();
		}
	return JSONObject.fromObject("{success:true,data:obj}");
}

结束.

你可能感兴趣的:(js)