前端使用jQuery+ajax+formdata上传图片加信息方法
html部分:
<form name="add">
<input type="number" name="ldmLotteryId" id="ldmLotteryId">//其他信息
<br>
图片: <input type="file" name="storeimgsrc" id="storeimgsrc" accept="imgage/*" onchange="base64()">//图片信息
<img id="img_upload_show"/>//图片预览区
<input type="hidden" name="img_upload_base" id="img_upload_base"/>//隐藏框(存储base64码字符串)
</form>
<button type="submit" onclick=postInfo("url")>新增</button>//提交框(url是你需要提交的地址)
图片转base64码方法
<script type="text/javascript">
function base64() {
var input = document.querySelector('input[type = "file"]');
var file = input.files[0]
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
$("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览
$("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用
console.log(this.result)
var img = $("#img_upload_base").val();
var imgNum = img.split(",base64,");
console.log(imgNum)
var imgBase = imgNum[1];
console.log(imgBase);
}
}
提交前将数据转成json格式的方法
function postInfo(url) {
var form = document.add;
if (form == null) {
console.log("---");
} else {
var obj = {};
for (var i = 0; i < form.length; i++) {
obj[form[i].name] = form[i].value;
}
var json = JSON.stringify(obj);
console.log(json)
testPost(url, json);
}
}
ajax提交方法
function testPost(URL, PARAMS) {
console.log("-----------")
console.log(PARAMS)
$.ajax({
type: "post",
contentType: "application/json",
url: URL,
data: PARAMS,
success: function (data) {
alert(data)
console.log(data);
if (data == "success") {
alert("成功");
} else {
alert("失败")
}
}
})
}
</script>