基於Ajax的formData圖片和資料上傳rue實現

這次帶給大家基於Ajax的formData圖片和資料上傳rue實現，基於Ajax的formData圖片和資料上傳注意事項有哪些，以下就是實戰案例，一起來看一下。

最近做一個項目，關於用戶資料和表單上傳的項目，碰到了不少坑，這裡總結的分享給大家，希望能夠幫助大家。 （小白，歡迎大家多交流）

多的就不說了，直接來程式碼吧！ ！

1、上傳元件說明一下，項目是基於vue框架的

<template>
  <p>    
    </p>
<p>
       </p>
<p>     
        <img  class="shopicon lazy" src="/static/imghwm/default1.png" data-src="../../assets/head.jpg" alt="基於Ajax的formData圖片和資料上傳rue實現" >
        </p>
<p>开心就好的小店</p>
      
    
    <p>
      </p>
<p>
        <label>商品名称：</label><input>
      </p>
      <p>
        <label>商品类型：</label>
        <select>
          <option>请选择</option>
          <option>图书</option>
          <option>卡券</option>
          <option>服装</option>
          <option>礼品</option>
          <option>运动装备</option>
          <option>电子设备</option>
          <option>日用百货</option>
          <option>其他</option>
        </select>
      </p>      
      <p>
        <label>商品描述</label>       
      </p> class="startleft">
       <textarea></textarea>
      <p>
        <label>单价:</label>
        <input>
      </p>
      <p>
        <label>数量:</label>
        <input>
      </p>
      <p>
        <label>联系电话:</label>
        <input>
      </p>
      <p>
        <label>地址:</label>
        <input>
      </p>
      <p>
        <label>图片</label>
        <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="基於Ajax的formData圖片和資料上傳rue實現" >
        <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="基於Ajax的formData圖片和資料上傳rue實現" >      
      </p>      
      <p>
        </p>
<p>
          <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="基於Ajax的formData圖片和資料上傳rue實現" >
          <input>
        </p>
        <p>
          <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="基於Ajax的formData圖片和資料上傳rue實現" >
          <input>
        </p> 
      
    
    <p>
      </p>
<ul>
        <li>首页</li>
        <li>返回货架</li>
        <li>放弃编辑</li>
        <li>上架</li>
      </ul>
    
    <p></p>
  
</template>

說明，包含兩個上傳圖片的元件，前面一個有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 = 'block';
      imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}

這部分的主要功能是將選取的圖片進行展示，當然啦，這裡並沒有出來多張圖片的情況

3、核心部分，圖片上傳

/*采用formData形式上传图片和表单数据*/
upload: function() {
  var _self = this;
  var formData = new FormData();
  var inputs = $("input.fileupload");
  for (var i = 0; i <p style="text-align: left;"><strong>說明：</strong></p><p style="text-align: left;">類似於formData.append('barterCategoryid', _self.goodstype) ; 是一種鍵值對的形式保存數據，而formData.append(“file”, file.files[0], file.files[0].name); 第一個參數為服務端接收的參數名，第二個為文件對象，第三參數為文件名稱，這樣可以將多個文件添加為數組的形式給伺服器。 </p><p style="text-align: left;">後端接收該類型的檔案時類型指定為：MultipartFile類型</p><p style="text-align: left;"><strong>#特別說明： </strong></p><p style="text-align: left;"><span style="color: #800000">processData: false, <br>contentType: false, </span></p><p style="text-align: left;">這兩句一定要加上，否則資料會被序列化，而導致後端不能辨識</p><p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p><p>推薦閱讀：</p><p><a href="http://www.php.cn/js-tutorial-391081.html" target="_blank">怎麼設定Google瀏覽器支援file協定的AJAX請求</a><br></p><p><a href="http://www.php.cn/js-tutorial-391075.html" target="_blank">如何用php接收ajax提交到後台的資料</a><br></p>#

以上是基於Ajax的formData圖片和資料上傳rue實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！