JavaWeb+Jquery 完成图片表单数据上传

博主这里是在前端把图片转换成base64了， 因为这不是我的项目， 很老了。所以写起来很难受

直接上代码吧, 还不是最严谨的版本, 有许多判断可以自行添加

function FileUpload_onselect(el) {
			console.log("选择文件");
			img2Base64($('#goodsPic')[0], function(data) {
				$('.userPhoto').attr('src', data);
		})
		}
		function submitAddGood(baseurl) {
			let goodsPic = $('#goodsPic')[0].files[0];
			console.log(goodsPic);
			img2Base64($('#goodsPic')[0], function(data) {
				$('#picUrl').attr('value', data);
				$.ajax({
					type : "POST",
					url : baseurl + "/user/addSellerGood.action",
					data : $('#addGoodInfo').serialize(),
					ContentType : false,
					processData : false,

					success : function(res) {
						if (res.add == true) {
							$("#msgTitle").html("Success");
							$("#msgBody").html("提交成功");
							$("#msgModal").modal();
							location.reload();
						} else {
							$("#msgTitle").html("Failed");
							$("#msgBody").html(res.msg);
							$("#msgModal").modal();
						}
					},
					error : function(res) {

					}
				});
			});

		}

		// 将图片文件转化为Base64
		function img2Base64(input_file, get_data) {
			/*input_file：文件按钮对象*/
			/*get_data: 转换成功后执行的方法*/
			if (typeof (FileReader) === 'undefined') {
				console.log("图片异常")
			} else {
				try {
					/*图片转Base64 核心代码*/
					var file = input_file.files[0];
					console.log((file.type));
					console.log((file.type).toString().substring(0,5));
					//判断下类型如果不是图片就返回 去掉就可以上传任意文件
					if (file.type.substring(0,5) !== 'image') {
						return false;
					}
					var reader = new FileReader();
					reader.onload = function() {
						get_data(this.result);
					}
					reader.readAsDataURL(file);
				} catch (e) {
					console.log("图片img2base64：转化失败")
					alert("请上传图片格式的文件")
				    $("#goodsPic").val(""); 
				}
			}
		}

Html:

<form
				action="${pageContext.request.contextPath}/user/addSellerGood.action"
				enctype="multipart-formdata" role="form" id="addGoodInfo"
				method="post">
				<span
					style="text-align: left; font-weight: 700; letter-spacing: 7px; border-bottom: 2px solid #333333b8; margin-top: 65px; padding: 5px; font-size: 21px; margin-left: 7px;">新增商品信息:</span>
				<div class="col-2-container">

					<div class="">
						<label for="goodsName"> 商品名称: </label> <input class="form-control"
							name="goodsName" id="goodsName" required type="text" />
					</div>
					<div class="">
						<label for="goodsPrice"> 商品价格: </label> <input
							class="form-control" name="goodsPrice" id="goodsPrice"
							type="text" />
					</div>
				</div>
				<div class="col-2-container">

					<div class="">
						<label for="goodsDiscount"> 商品降价: </label> <input
							class="form-control" name="goodsDiscount" id="goodsDiscount"
							type="text" />
					</div>
					<div class="">
						<label for="goodsPic"> 上传商品图片: </label> <input id="goodsPic" onchange="FileUpload_onselect(this)"
							class="form-control" name="goodsPic" type="file" />
					</div>
					<br>
				</div>
				<img class="userPhoto"
					style="width: 100px; text-align: center; display: block; height: 100px; margin: 0 auto;"
					src="resources/images/logo.jpg" alt="图片缩略图">

				<div class="col-1-container">
					<label for="goodsCate"> 商品类型: </label> <input
						style="width: 280px; margin-top: 8px;" class="form-control"
						name="goodsCate" id="goodsCate" type="text" />
				</div>

				<div class="col-1-container">
					<div class="">
						<label for="goodsDisc"> 商品介绍: </label> <br>
						<textarea style="width: 700px; height: 180px;"
							class="form-control" name="goodsDisc" id="goodsDisc"></textarea>
					</div>
				</div>
				<input class="form-control" name="userId" id="userId"
					value="${sessionScope._LOGIN_USER_.userId}" type="hidden" /> <input
					class="form-control" name="picUrl" id="picUrl" value=""
					type="hidden" />
				<div class="col-1-container">
					<div class="my-select">
						<label for="goodsStock"> 商品出租状态: </label> <select
							name="goodsStock" id="goodsStock"
							style="width: 100px; height: 100%;">
							<option value="0">未出租</option>
							<option value="1">已出租</option>
						</select>
					</div>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<button class="btn btn-primary"
						onclick="submitAddGood('${pageContext.request.contextPath}')"
						type="button"
						style="padding-left: 20px; padding-right: 20px; text-align: center;">提交</button>

				</div>
			</form>