ajax FormData上传文件和数据

http://www.jb51.net/article/114003.htm

<divclass="startleft describebox">

        <labelclass="title">商品描述</label>      

      </divclass="startleft">

       <textareaclass="describeinfo"v-model="goodsinfo"></textarea>

      <divclass="startleft">

        <labelclass="title">单价:</label>

        <inputclass="noborder"placeholder="请输入单价"v-model="price">

      </div>

      <divclass="startleft">

        <labelclass="title">数量:</label>

        <inputclass="noborder"placeholder="请输入数量"v-model="number">

      </div>

      <divclass="startleft">

        <labelclass="title">联系电话:</label>

        <inputclass="noborder"placeholder="请输入手机号"v-model="phone">

      </div>

      <divclass="startleft">

        <labelclass="title">地址:</label>

        <inputclass="noborder"placeholder="请输入地址"v-model="address">

      </div>

      <divclass="startleft">

        <labelclass="title">图片</label>

        <imgsrc="">

        <imgsrc="">     

      </div>     

      <divclass="addimg">

        <divclass="imgbox">

          <imgclass="goodsimg"src="../../assets/addimg.png">

          <inputid="file"type="file"class="fileupload"accept="image/*"multiple capture="camera"@change="viewimg()"/>

        </div>

 

        <divclass="imgbox">

          <imgclass="goodsimg"src="../../assets/addimg.png">

          <inputtype="file"class="fileupload"accept="image/*"capture="camera"@change="viewimg()"/>

        </div>

      </div>

    </div>







var formData = new FormData();

  varinputs = $("input.fileupload");

  for(var i = 0; i < inputs.length; i++) {

    varfile = inputs[i];

    if(inputs[i].files[0]) {

      formData.append("file", file.files[0], file.files[0].name);

    }

  }

  formData.append('barterCommodityname', _self.goodsname);

  formData.append('barterSellingprice', _self.price);

  formData.append('barterContactinformation', _self.phone);

  formData.append('barterCommodityquantity', _self.number);

  formData.append('barterCommodityaddress', _self.address);

  formData.append('barterDescriptioninform', _self.goodsinfo);

  formData.append('barterCategoryid', _self.goodstype);

  var_self = this;

  $.ajax({

    type:'POST',

    url:'http://10.145.0.05/goods/addGoods',

    dataType:"json",

    data: formData,

    processData:false,

    contentType:false,

    success:function(data) {

      console.log(data);

      if(data.code == 200) {

        console.log("success");

        // _self.$router.push('/');

      }else {

        alert(data.message);

      }

    }

  });







http://www.jb51.net/article/89998.htm





<form name="form1"id="form1">

    <input id="file"type="file" name="name"></input>

  </form>




<script type="text/javascript">

     varform=document.getElementById("form1");

     varformdata=new FormData(form);

  </script>

</body>

</html>

可以在已有表单数据的基础上，继续添加新的键值对

?

1

2

var formdata=new FormData();

 formdata.append ("age", "21");

使用FormData对象上传文件

?

1

2

3

4

5

6

7

8

9

10

11

12

13

var formdata=new FormData($("#form1").[0]);//获取文件法一

//var formdata=new FormData( );

//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二

       $.ajax({

           type :'post',

           url :'#',

           data : formdata,

           cache :false,

           processData :false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理

           contentType :false, // 不设置Content-type请求头

           success :function(){}

           error :function(){ }

       })