Rumah > hujung hadapan web > tutorial js > 基于Ajax的formData图片和数据上传

基于Ajax的formData图片和数据上传

亚连
Lepaskan: 2018-05-22 14:44:41
asal
1687 orang telah melayarinya

这篇文章主要为大家详细介绍了基于Ajax的formData图片和数据上传相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近做一个项目,关于用户数据和表单上传的项目,碰到了不少坑,这里总结的分享给大家,希望能够帮助大家。(小白,欢迎大家多交流)

多的就不说了,直接来代码吧!!

1、上传组件 说明一下,项目是基于vue框架的

<template>
  <p class="newproduct">    
    <p class="topbox">
       <p class="shopbox">     
        <img class="shopicon" src="../../assets/head.jpg">
        <p class="shopname">开心就好的小店</p>
      </p>
    </p>
    <p class="goodsbox">
      <p class="startleft namebox">
        <label class="title">商品名称:</label><input class="noborder" v-model="goodsname" placeholder="请输入商品名称">
      </p>
      <p class="startleft goodstypebox">
        <label class="title">商品类型:</label>
        <select v-model="goodstype">
          <option value="请选择">请选择</option>
          <option value="图书">图书</option>
          <option value="卡券">卡券</option>
          <option value="服装">服装</option>
          <option value="礼品">礼品</option>
          <option value="运动装备">运动装备</option>
          <option value="电子设备">电子设备</option>
          <option value="日用百货">日用百货</option>
          <option value="其他">其他</option>
        </select>
      </p>      
      <p class="startleft describebox">
        <label class="title">商品描述</label>       
      </p class="startleft">
       <textarea class="describeinfo" v-model="goodsinfo"></textarea>
      <p class="startleft">
        <label class="title">单价:</label>
        <input class="noborder" placeholder="请输入单价" v-model="price">
      </p>
      <p class="startleft">
        <label class="title">数量:</label>
        <input class="noborder" placeholder="请输入数量" v-model="number">
      </p>
      <p class="startleft">
        <label class="title">联系电话:</label>
        <input class="noborder" placeholder="请输入手机号" v-model="phone">
      </p>
      <p class="startleft">
        <label class="title">地址:</label>
        <input class="noborder" placeholder="请输入地址" v-model="address">
      </p>
      <p class="startleft">
        <label class="title">图片</label>
        <img src="">
        <img src="">      
      </p>      
      <p class="addimg">
        <p class="imgbox">
          <img class="goodsimg" src="../../assets/addimg.png">
          <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
        </p>

        <p class="imgbox">
          <img class="goodsimg" src="../../assets/addimg.png">
          <input type="file" class="fileupload" accept="image/*" capture="camera" @change="viewimg()"/>
        </p> 
      </p>
    </p>
    <p class="bottombox" :style="{&#39;top&#39;:(height-12) + &#39;px&#39;}">
      <ul class="bottommenu">
        <li class="item" @click="backHome()">首页</li>
        <li class="item" @click="backShop()">返回货架</li>
        <li class="item border">放弃编辑</li>
        <li class="item" @click="uploadtest()">上架</li>
      </ul>
    </p>
    <p class="fillbottom"></p>
  </p>
</template>
Salin selepas log masuk

说明,包含两个上传图片的组件,前面一个有multiple为多文件模式,即一次可选择多张图片,后面的是单文件模式。

2、接下来是图片的预览

viewimg($event) {
  //获取当前的input标签
  var currentObj = event.currentTarget; 
  //找到要预览的图片img标签,亦可动态生成
  var img = currentObj.parentNode.children[0]; 
  setImagePreview(currentObj, img);
  function setImagePreview(docObj, imgObjPreview) {
    if (docObj.files && docObj.files[0]) {
      imgObjPreview.style.display = &#39;block&#39;;
      imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}
Salin selepas log masuk

这一部分的主要功能是将选中的图片进行展示,当然啦,这里并没有出来多张图片的情况

3、核心部分,图片上传

/*采用formData形式上传图片和表单数据*/
upload: function() {
  var _self = this;
  var formData = new FormData();
  var inputs = $("input.fileupload");
  for (var i = 0; i < inputs.length; i++) {
    var file = inputs[i];
    if (inputs[i].files[0]) {
      formData.append("file", file.files[0], file.files[0].name);
    }
  }
  formData.append(&#39;barterCommodityname&#39;, _self.goodsname);
  formData.append(&#39;barterSellingprice&#39;, _self.price);
  formData.append(&#39;barterContactinformation&#39;, _self.phone);
  formData.append(&#39;barterCommodityquantity&#39;, _self.number);
  formData.append(&#39;barterCommodityaddress&#39;, _self.address);
  formData.append(&#39;barterDescriptioninform&#39;, _self.goodsinfo);
  formData.append(&#39;barterCategoryid&#39;, _self.goodstype);
  var _self = this;
  $.ajax({
    type: &#39;POST&#39;,
    url: &#39;http://10.145.0.05/goods/addGoods&#39;,
    dataType: "json",
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data);
      if (data.code == 200) {
        console.log("success");
        // _self.$router.push(&#39;/&#39;);
      } else {
        alert(data.message);
      }
    }
  });
}
Salin selepas log masuk

说明:

类似于formData.append(‘barterCategoryid', _self.goodstype); 是一种键值对的形式保存数据,而formData.append(“file”, file.files[0], file.files[0].name); 第一个参数为服务端接收的参数名,第二个为文件对象,第三参数为文件名称,这样可以将多个文件添加为数组的形式给服务器。

后端接收该类型的文件时类型指定为:MultipartFile类型

特别说明:

processData: false,
contentType: false,

这两句一定要加上,否则数据会被序列化,而导致后端不能识别

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

通过history解决ajax不支持前进/后退/刷新的问题(图文教程)

Ajax 实现网站劫持的检测方法

原生JS实现Ajax跨域请求flask响应内容(图文教程)

Atas ialah kandungan terperinci 基于Ajax的formData图片和数据上传. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan