前端使用jQuery+ajax+formdata上传图片加信息方法

html部分:

<form name="add">
<input type="number" name="ldmLotteryId" id="ldmLotteryId">//其他信息
<br>
图片: &nbsp;<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>
posted @ 2018-03-28 16:05  什么是无欲无求  阅读(219)  评论(0编辑  收藏  举报