- 三种ajax上传文件方法: https://www.cnblogs.com/NoYone/p/8244912.html
风雪幻林:
文件的上传（表单上传和ajax文件异步上传）:https://www.cnblogs.com/fengxuehuanlin/p/53118.html
<head>
<script src="jquery-2.1.4.js"></script>
<script>
$(function () {
$("#upload").click(function () {
$("#imgWait").show();
var formData = new FormData();
formData.append("myfile", document.getElementById("file1").files[0]);
$.ajax({
url: "upload.ashx",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
if (data.status == "true") {
alert("上传成功！");
}
if (data.status == "error") {
alert(data.msg);
}
$("#imgWait").hide();
},
error: function () {
alert("上传失败！");
$("#imgWait").hide();
}
});
});
});
</script>
</head>
<body>
选择文件:<input type="file" id="file1" /><br />
<input type="button" id="upload" value="上传" />
<img src="wait.gif" style="display:none" id="imgWait" />
</body>
后台给出: java.io.IOException: Your InputStream was neither an OLE2 stream, nor an OOXML stream. ==您的InputStream既不是OLE2流，也不是OOXML流
$.ajax({
type : "get",
url :"/data/keyword/add/"+datatype+"/"+ value,
data :datatype,value, //@
datatype : "json",
cache : false,
processData : false,
contentType : false,
success : function(data) {
console.log(data);
},
error:function(data) {
console.log(261);
}
});
会出现问题. success处直接略过.
原因 ，此为 " get "请求. ‘data’ 处 即 @行 是多余的. 就算写上了请求过去了.返回时依旧是error处
(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)=❀可爱小分割❀=(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀
上传多个文件 ? 第一种:
html:
<form id="file_form" enctype="multipart/form-data">
<input type="file" id="file" multiple="multiple" placeholder="文件">
</form>
js:
var form = new FormData();
form.append("username","yayaya");
var filrarr = document.getElementById("file").files;
for(var i = 0; i < filrarr.length; i++){
form.append("files", filrarr[i]);
}
$.ajax({
type : "POST",
url :"/data/urlstr ,
data : form,
datatype : "json",
cache : false,
processData : false,
contentType :false,
success : function(data) {
},
error : function(data) {
}
});
接口:
@PostMapping(value = "/data/urlstr",)
@ResponseBody
public void fileAssessment(FileParam File) {
//
}
class FileParam {
private MultipartFile[] files;
private String username;
}
? 第二种:
html:
<form id="uploadForm" enctype="multipart/form-data">
<!-- action="/post/upload" method="post" -->
<input type="file" name="files" id="files" multiple="multiple">
<button type="button" id="button" onclick="UpladFile()">上传</button>
</form>
js:
function UpladFile() {
var form = new FormData(document.getElementById("uploadForm"));
$.ajax({
url : "/post/upload",
type : "post",
data : form,
processData : false,
contentType : false,
success : function(data) {
},
error : function(e) {
}
});
接口:
@PostMapping("/upload")
public void filesUpload(HttpServletRequest request, @RequestParam("files") MultipartFile[] files){
}
(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)=❀可爱小分割❀=(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀
奉上form 序列化:? (●’◡’●) ?
第一种:
$("#form").serialize();
$("#form").serializeArray()
var para = $('form').serializeObject() ;
para = JSON.stringify(para) ;
emmm…小女子不才.报错了.?
略略略略略略圙略略略略略略····
(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)=❀可爱小分割❀=(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀
上传对象: ? (●’◡’●) ?
$.ajax({
type : "post",
url :"/createUser",
data: JSON.stringify({
"username": document.getElementById("User_name").value,
"password": document.getElementById("User_password").value,
"description" : document.getElementById("User_exolain").value,
}),
datatype: "json",
contentType: 'application/json',
success : function(data) {}});
接口:
@PostMapping("/user/create")
@ResponseBody
@ApiOperation("新建用户")
public void createhUser(UserParam userparam) {
}
上传 数组:? (●’◡’●) ?
var filesName =[];
$.ajax({
type : "post",
url : "/filemark",
traditional: true, //这里设置为true，关键
data: {
"username":username,
"projectName": projectName,
"filesName": filesName,
},
datatype : "json",
success : function(data) {
},
error : function(e) {
}
});
后端:
@PostMapping("filemark")
@ResponseBody
public void getFilemark(String username,String projectName,String[] filesName) {
}
上传 对象数组:? (●’◡’●) ?
$.ajax({
type : "post",
url : "/data/filemarks",
// traditional: true, //这里设置为true，关键
contentType: 'application/json',
data: JSON.stringify(models),//对象数组
/*data: JSON.stringify({
"username":username,
"projectname":"projectname",
"filename":"filename",
"mark":"1",
}),*/
datatype : "json",
success : function(data) {
},
error : function(e) {
}
});
后端:
@PostMapping("filemark")
@ResponseBody
public void getFilemark(@RequestBody model[] models) {
}
(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)=❀可爱小分割❀=(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀
function save_importProject_fileName() { //新建项目_文件名形式.
var modelArgsParamArr = $('#fileMoreSetting_form').serializeArray()
var modelArgsParam=transformToJson(modelArgsParamArr);
var projectParam ={
projectName:$("#priject_name").val(),
description:$("#priject_exolain").val(),
modelArgsParam:modelArgsParam
}
$.ajax({
type : "POST",
url : "/data/project/name" ,
data:JSON.stringify(projectParam),
datatype : "json",
contentType: "application/json; charset=utf-8",
processData: false,
success : function(data) {
},
function transformToJson(formData){ //form表单数据转为json格式
var obj={}
for (var i in formData) {
/*[{"name":"model","value":"WATERFALL"},
* {"name":"devLanguage","value":"1"}]
*/
//下标为的i的name做为json对象的key，下标为的i的value做为json对象的value
obj[formData[i].name]=formData[i]['value'];
}
return obj;
}
接口:
@PostMapping("/project/name")
@ResponseBody
public voidcreateProject(@Valid @RequestBody ProjectParam projectParam) {
}
==一直报错是因为$(’#fileMoreSetting_form’).serialize()格式中存在&符号.并不是json格式.
链接:
:https://www.cnblogs.com/mohehpc/p/8335183.html
:
https://zhidao.baidu.com/question/750266190766969252.html
:http://www.bejson.com/
