ajax- 记录= 上传文件.&& 传参数.

最新推荐文章于 2023-05-02 18:29:03 发布

橙_

最新推荐文章于 2023-05-02 18:29:03 发布

阅读量285

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_43645096/article/details/96864873

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三种ajax上传文件方法: https://www.cnblogs.com/NoYone/p/8244912.html

风雪幻林:
文件的上传（表单上传和ajax文件异步上传）:https://www.cnblogs.com/fengxuehuanlin/p/5311648.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) {
	}

(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)=❀可爱小分割❀=(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀(●’◡’●)❀

js:
js:

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格式.
链接:
参考1 :https://www.cnblogs.com/mohehpc/p/8335183.html
参考2 :
https://zhidao.baidu.com/question/750266190766969252.html
参考3 json格式检查 :http://www.bejson.com/

橙_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax- 记录= 上传文件.&& 传参数.

三种ajax上传文件方法: https://www.cnblogs.com/NoYone/p/8244912.html风雪幻林:文件的上传（表单上传和ajax文件异步上传）:https://www.cnblogs.com/fengxuehuanlin/p/5311648.html<head> <script src="jquery-2.1.4.js"></sc...
复制链接

扫一扫

专栏目录