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

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:

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;”>新增商品信息:

商品名称: <input class=“form-control”

name=“goodsName” id=“goodsName” required type=“text” />

商品价格: <input

class=“form-control” name=“goodsPrice” id=“goodsPrice”

type=“text” />

商品降价: <input

class=“form-control” name=“goodsDiscount” id=“goodsDiscount”

type=“text” />

上传商品图片: <input id=“goodsPic” οnchange=“FileUpload_onselect(this)”

class=“form-control” name=“goodsPic” type=“file” />

<img class=“userPhoto”

style=“width: 100px; text-align: center; display: block; height: 100px; margin: 0 auto;”

src=“resources/images/logo.jpg” alt=“图片缩略图”>

最后

针对以上面试题，小编已经把面试题+答案整理好了

面试专题

除了以上面试题+答案，小编同时还整理了微服务相关的实战文档也可以分享给大家学习

了解详情https://docs.qq.com/doc/DSmxTbFJ1cmN1R2dB
7)]

除了以上面试题+答案，小编同时还整理了微服务相关的实战文档也可以分享给大家学习

[外链图片转存中…(img-PiEDeFkA-1724423552108)]

[外链图片转存中…(img-qzOuuqvD-1724423552108)]

[外链图片转存中…(img-ZoLnt7OW-1724423552109)]

了解详情https://docs.qq.com/doc/DSmxTbFJ1cmN1R2dB