2 imaginecode ImagineCode 于 2016.03.08 10:25 提问

js上传图片和文字信息问题

如下图:如何把图片信息和输入表单的数据一起post到后端?

图片说明

我的写法是这样:

var uploadImg=[];//上传信息数组
$('#input-file-now').on("change",function(e){//点击上传照片事件
        funGetFiles(e);
    });
    //获取照片信息
function funGetFiles(e) {
    uploadImg=[];//清空
    var files = e.target.files || e.dataTransfer.files;
    uploadImg.push(files);
//  console.log(uploadImg);
}
 var name=$("input[id='name']").val();//获取宝贝昵称
    var year=$("select[id='year'] option:selected").val();//获取出生-年份
    var month=$("select[id='month'] option:selected").val();//获取出生-月份
    var mobile=$("input[id='mobile']").val();//获取联系方式-手机
    var qq=$("input[id='qq']").val();//获取联系方式-QQ号
    var desc=$("textarea[name='desc']").val();//获取描述文本
    var birthday=year+"."+month;//出生年月

    //提交信息
    $.each(uploadImg, function(k,v) {  
        var val=v;
        var formdata=new FormData();
        formdata.append("fileList",val);
//      var xhr=new XMLHttpRequest();
        console.log(formdata);
        var jsonData={"name":name,"birthday":birthday,"mobile":mobile,"qq":qq,"img":formdata,"desc":desc};
        jsonData=JSON.stringify(jsonData);
        console.log(jsonData);
        $.post("url",jsonData,function(data){

        });
//      funUploadFile();
    });

但是,输出的是:{"name":"司法所","birthday":"2014.4","mobile":"12321432432","qq":"12323432","img":{},"desc":"水电费第三方"}

3个回答

showbo
showbo   Ds   Rxr 2016.03.08 11:15
已采纳

post h5的formdata对象,附加数据全部放到formdata中,而不是自己组个json对象。formdata插入图片信息也不正确,你放入文件名没用,要放文件2进制数据
DEMO
html5 ajax上传文件asp.net示例

showbo
showbo 而且不能用jquery,jquery会调用param转为键值对导致数据丢失,要不你就是用jquer.form.js这个插件,可以上传文件,不支持formdata用iframe模拟
2 年多之前 回复
Royal_lr
Royal_lr   Ds   Rxr 2016.03.08 10:52

用一个表单包起来,提交表单就行了,,

Royal_lr
Royal_lr 回复ImagineCode: var data=$("#form").serialize(),,$.post(url,data),,post方式上传图片可能会有问题
2 年多之前 回复
ImagineCode
ImagineCode 刚更新了下我的写法
2 年多之前 回复
ImagineCode
ImagineCode 用$.post()的方式呢
2 年多之前 回复
ImagineCode
ImagineCode post的方式呢
2 年多之前 回复
daidaineteasy
daidaineteasy   Ds   Rxr 2016.03.08 11:10

ajax中将表单的序列化作为参数传递就可以了,后台获取的方式跟用普通的submit提交的表单获取方式一样。

        $.ajax({        url : "",
                       type : "post",
                       dataType : "json",
                       data : $("#form").serialize();,
                       success : function(result) .......
ImagineCode
ImagineCode 但是图片的信息并没有 并序列化传递过去 。结果如下: name:司法所 year:2015 month:2 mobile:123213213 qq:123123123 desc:水电费第三方说
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js实现上传图片 文字 (全步骤)
## 之前写过pc项目 也用过  http://www.uploadify.com/       在一次写pc项目感觉不是自己想要的后面通过js实现图片文字上传http://www.uploadify.com/   这个插件也不错 看个人喜欢吧### 下面是我的效果图  复制代码就能用  用jq+jqForm实现以下是代码:不对之处请指出,谢谢<!DOCTYPE html><ht...
同时上传图片与文字
实现文本与图片同时上传: 首先上传文字内容比较简单,而上传图片的话比较麻烦,这里可以从网上下载commons-fileupload-1.3.1,commons-io-2.4两个jar包, 上传具体实现类代码如下: public class TombServiceImpl implements TombService { ITombDao tombDao = new TombDao
Android上传图片和文字到服务器
1. 首先到Appache官网下载第三方jar包httpmime(我本地有一个跟下面代码能保持一致,最新的jar不适合以下代码。但不知道怎么上传jar) 2. 服务器地址: http://localhost:8080/xxx/xxx/xxx 3. 本地图片地址/sdcard/Pictures/abc.png 4.具体代码: private class UploadTask extend
ios开发 利用AFNetworking实现同时上传字符串与图片数据
最近在做一个人脸识别考勤系统的时候,遇到了需要同时上传学生学号和学生照片到服务器的需求。因为要根据学生学号和学生照片来判断是否为本人,所有这两个数据不能分开上传到服务器,必须得同时上传。所有我们用到了AFNetworking的AFMultiparFormData 来传输数据。下面是程序的关键代码: //上传头像图片到服务器 -(void) postImageToServer { _ma
android 上传图片并附加文字信息
用于上传图片时,附加一些关于图片的信息,可以设置多个key->value 形式的信息,其实就是多类型表单
js无刷新上传图片例子
js无刷新上传图片 上传图片 js无刷新上传图片 上传图片
java+ jsp+js 实现富文本编辑和上传图片功能
java+ jsp+js 实现富文本编辑和上传图片功能
前端ajax同时传图片(兼图片展示)与文本信息的方法
第一段的代码是点击上传图片的函数,可以验证图片信息和展示上传的图片,是在网上找的两端代码拼接的,改改就能用了. function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); fil
安卓短信群发系统毕业设计
这是做的毕业设计,实现上传图片,声音,文字信息等功能
js无刷新上传图片及在线切割
js无刷新上传图片及在线切割js无刷新上传图片及在线切割js无刷新上传图片及在线切割js无刷新上传图片及在线切割