首页新闻找找看学习计划

表单提交问题

0
悬赏园豆:20 [已解决问题] 解决于 2018-03-27 16:08

如何实现表单提交数据同时提交图片,提交方式使用ajax方法,求解

什么是无欲无求的主页 什么是无欲无求 | 初学一级 | 园豆:178
提问于:2018-03-27 14:55
< >
分享
最佳答案
2
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('param', 'value') // 其它参数

fetch('/url', {
  method: 'POST',
  body: data
})
收获园豆:20
by.Genesis | 小虾三级 |园豆:1369 | 2018-03-27 15:10

input[type="file"] 这块是代表什么

什么是无欲无求 | 园豆:178 (初学一级) | 2018-03-27 15:12

@一句我爱不如我在: 就是你选择文件那个 input 框

<input type="file">

by.Genesis | 园豆:1369 (小虾三级) | 2018-03-27 15:13

@by.Genesis: data.append('file', input.files[0])这块显示input.files[0]找不到这个值呀

什么是无欲无求 | 园豆:178 (初学一级) | 2018-03-27 15:21

@一句我爱不如我在: 选择文件之后就会有

by.Genesis | 园豆:1369 (小虾三级) | 2018-03-27 15:25

@by.Genesis: 我代码块是这样的

form表单块:

<form name="add">
奖品商品ID:&nbsp;<input type="number" name="ldmCommodityId" id="ldmCommodityId">
<br>
抽奖活动ID:&nbsp;<input type="number" name="ldmLotteryId" id="ldmLotteryId">
<br>
图片: &nbsp;<input type="file" name="storeimgsrc" id="storeimgsrc">

<input type="hidden" name="ldmSwiperImagesId" id="ldmSwiperImagesId">

</form>
<button type="submit" onclick=postInfo("/addSwiperImage")>新增</button>

提交块:

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);
// httpPost(curWwwPath + "/login", json);
// loadXMLDoc(curWwwPath + "/login", json);
console.log(curWwwPath + url)
console.log(json)

var input = document.querySelector('input[type = "type"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('param', json)
console.log(data)


testPost(curWwwPath + url, json);

 

function testPost(URL, PARAMS) {
console.log("-----------")
console.log(PARAMS)

var v =

$.ajax({
type: "post",
contentType: "application/json",
url: URL,
data: PARAMS,
success: function (data) {
alert(data)
console.log(data);
if (data == "success") {
alert("成功");
select();
hidden();
} else {
alert("失败")
postInfo()
}

}

})

}

 

 

什么是无欲无求 | 园豆:178 (初学一级) | 2018-03-27 15:27

@一句我爱不如我在: var input = document.querySelector('input[type = "file"]')

你写错了

by.Genesis | 园豆:1369 (小虾三级) | 2018-03-27 15:35

@by.Genesis: ????,那该怎么改

什么是无欲无求 | 园豆:178 (初学一级) | 2018-03-27 15:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册