整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          一篇文章搞定form表單中上傳圖片控件使用技巧

          現(xiàn)功能介紹:在使用form表單上傳圖片時,將上傳圖片縮略圖顯示在上傳圖片控件內(nèi)的方法

          HTML區(qū):
          
          <div class="form-group">
                <label for="avatar">頭像<img class="avatar" width="80px" height="80px"
                 src="{% static 'image/head/default.png' %}"
                           alt="圖片未加載出"></label>
                 <input type="file" id="avatar" style="display: none">
          </div>
          
          
          JS代碼區(qū)
          
          <script>
              {#替換頭像位置圖片方法#}
              $('#avatar').change(function () {
                      {#jquery對象轉(zhuǎn)換為DOM對象#}
                      var choose_file = $(this)[0].files[0];
                      {#創(chuàng)建一個閱讀器對象#}
                      var reader = new FileReader();
                      {#讀取choose_file的文件對象#}
                      reader.readAsDataURL(choose_file);
                      {#上面代碼加載完再運行函數(shù)內(nèi)代碼(原因:圖片未加載完下面的代碼就有可能執(zhí)行完了)#}
                      reader.onload = function () {
                          {# 路徑的值在reader.result中#}
                          $('.avatar').attr("src", reader.result)
                      }
                  }
              )
          </script>

          PS:注意務(wù)必要引入jQuery樣式

          最終結(jié)果顯示


          #python##Python入門推薦#

          最近做勇泰商城項目,用了之前沒用過的react和ant-design,其余部分大同小異,結(jié)果要在表單里上傳圖片卻犯了難,網(wǎng)上找了一圈也沒有找到靠譜的解決方案,遂在這里記錄一番

          動手

          樣式

          先來一個form組件,然后在form的item里加入upload組件

          <Form onFinish={onFinish} form={form}>
              <Form.Item
              label="商品圖片"
              name="img"
              valuePropName="img"
              getValueFromEvent={normFile}
              >
              <Upload
                  name="file"
                  listType="picture-card"
                  className="avatar-uploader"
                  action="https://upload.qiniup.com"
                  showUploadList={false}
                  data={getToken}
                  onChange={handleChange}
              >
                  {form.getFieldValue("img") ? (
                  <img className="img"  src={baseURL + form.getFieldValue("img")} alt="" />
                  ) : (
                  <div>
                      <div style={{ marginTop: 8 }}>Upload</div>
                  </div>
                  )}
              </Upload>
              </Form.Item>
              <Form.Item>
              <Space size="middle">
                  <Button type="primary" htmlType="submit">
                  提交
                  </Button>
                  <Button
                  onClick={() => {
                      form.resetFields();
                      setVisible(false);
                  }}
                  >
                  取消
                  </Button>
              </Space>
              </Form.Item>
          </Form>
          

          使用form組件的關(guān)聯(lián)屬性form,組件渲染時使用form.getFieldValue("img")檢測form中是否有相關(guān)的值,此時存儲的值并不是像往常那樣的圖片本地地址,而是上傳后的圖片hash值,若有值,就拼接baserUrl展示圖片

          <img className="img"  src={baseURL + form.getFieldValue("img")} alt="" />
          

          如果沒有值的話就顯示上傳按鈕

          <div>
              <div style={{ marginTop: 8 }}>Upload</div>
          </div>
          

          圖片上傳完后如何將值回填到form表單中

          這就需要用到Form.Item的屬性getValueFromEvent,官方文檔給的描述是“設(shè)置如何將 event 的值轉(zhuǎn)換成字段值”,說實話,看了好幾遍,沒明白,還好找到了一段示例代碼,最后勉強明白,應(yīng)該是會捕捉內(nèi)部元素觸發(fā)的回調(diào),內(nèi)部的upload組件文件狀態(tài)改變時會有一個回調(diào),參見onChange[1]。Form.Item捕捉到這個回調(diào),我們就可以在里面搞些事情拿到上傳后的hash值了,如代碼中的getValueFromEvent={normFile}

          const normFile = (info) => {
              if (info.file.status == "done") {
                return info.file.response.key;
              }
            };
          

          上述代碼中增加了一步info.file.status=="done"的判斷,因為拿到的事件是文件狀態(tài)改變的回調(diào),所以只有最后上傳完成的一次回調(diào)中會帶有返回的hash值。

          修改數(shù)據(jù)如何將hash值又轉(zhuǎn)換成圖片顯示出來

          做CURD的都知道,一個表單一般創(chuàng)建和更新共用,剛才解決了創(chuàng)建的問題。其實更新的問題在上文中已經(jīng)說過了,其實就是使用form.getFieldValue("img"),很簡單,問題迎刃而解。

          總結(jié)

          之所以遇到這個問題其實是對新技術(shù)的不熟悉,等熟悉了之后也覺得這個問題沒什么了。程序開發(fā)人員寫的文檔往往如此,自己心理跟明鏡似的,所以文檔寫得非常簡單,但不熟悉的人來看文檔的話,就非常吃力了,要銘記此事,常自省也。

          References

          [1] onChange: https://ant.design/components/upload-cn/#onChange

          JavaScript中,您可以使用HTML5的<input type="file">元素來實現(xiàn)圖片上傳功能。

          以下是一個簡單的示例代碼,演示如何在JavaScript中上傳圖片:

          HTML部分:

          <input type="file" id="uploadInput">
          <button onclick="uploadImage()">上傳圖片</button>
          

          JavaScript部分:

          function uploadImage() {
            var fileInput = document.getElementById('uploadInput');
            var file = fileInput.files[0];
          
            if (file) {
              var formData = new FormData();
              formData.append('image', file);
          
              // 發(fā)送圖片數(shù)據(jù)到服務(wù)器
              // 這里可以使用XMLHttpRequest或fetch等方法發(fā)送請求
              // 請根據(jù)您的需求選擇適當(dāng)?shù)姆椒?    // 示例中使用XMLHttpRequest發(fā)送POST請求
              var xhr = new XMLHttpRequest();
              xhr.open('POST', '/upload', true);
              xhr.onload = function() {
                if (xhr.status === 200) {
                  // 上傳成功
                  console.log('圖片上傳成功');
                } else {
                  // 上傳失敗
                  console.log('圖片上傳失敗');
                }
              };
              xhr.send(formData);
            }
          }
          

          API部分:

          [HttpPost]
          [RequestSizeLimit(5242880)]
           public async Task<APIResult> upload(IFormCollection collection)
           {
          
                      APIResult rtn = new APIResult();
          
                      if (collection == null)
                      {
                          rtn.code = -100;
                          rtn.msg = "圖片列表為空";
                          return rtn;
                      }
                      else
                      {
                          try
                          {
                              string file_path = "";
                              // 預(yù)處理 用戶參數(shù):用戶指定子路徑                   
                              string userPath = DateTime.Now.ToString("yyyy-MM-dd");
                              if (collection.ContainsKey("path"))
                              {
                                  collection.TryGetValue("path", out Microsoft.Extensions.Primitives.StringValues val);
                                  if (!val.Equals("undefined"))
                                  {
                                      userPath = val.ToString();
                                  }
                              }
          
                              // 預(yù)處理 文件路徑
                              // 注意:這里可能會根據(jù)不同的環(huán)境來 修改 路徑前面是否需要添加 /
                              // 當(dāng)發(fā)現(xiàn)上傳不成功,目錄無法創(chuàng)建時,可以嘗試修改這里
                              file_path = $"upload/imgs/{userPath}/";
                              var uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, file_path);
                              if (!Directory.Exists(uploadPath))
                              {
                                  Directory.CreateDirectory(uploadPath);
                              }
          
                              // 處理文件
                              FormFileCollection filelist = (FormFileCollection)collection.Files;
                              foreach (IFormFile file in filelist)
                              {
                                  // 保存文件到磁盤
                                  string name = file.FileName;
                                  string FilePath = Path.Combine(uploadPath, name);
                                  string type = Path.GetExtension(name);
                                  using (var stream = System.IO.File.Create(FilePath))
                                  {
                                      await file.CopyToAsync(stream);
                                  };
          
                                  // 保存文件信息到表
                                  Sys_File f = new Sys_File();
                                  f.code = "image";
                                  f.name = name;
                                  f.file_type = type.Trim('.');
                                  f.file_group = userPath;
                                  f.file_path = $"/{file_path}{name}";
                                  f.is_active = true;
                                  f.memo = "";
                                  f.createTime = DateTime.Now;
                                  using (var dbctx = DBHelper.db)
                                  {
                                      await dbctx.AddAsync(f);
                                      await dbctx.SaveChangesAsync();
                                  };
                                  // 返回消息,包含文件路徑
                                  rtn.datas = $"/{file_path}{name}";
                                  rtn.code = 100;
                                  rtn.msg = "文件已保存!";
                              }
                          }
                          catch (Exception ex)
                          {
                              rtn.code = -200;
                              rtn.msg = "圖片保存失敗!";
                              Log4NetUnit.Instance.Log.Error("圖片保存失敗:" + ex.Message);
                          }
                          return rtn;
                      }
                  }


          在這個示例中,我們首先在HTML中創(chuàng)建了一個<input type="file">元素,用于選擇要上傳的圖片。

          然后,我們在JavaScript中編寫了一個uploadImage函數(shù),該函數(shù)在點擊"上傳圖片"按鈕時觸發(fā)。

          uploadImage函數(shù)中,我們首先獲取到<input>元素,并從中獲取到用戶選擇的圖片文件。

          然后,我們創(chuàng)建一個FormData對象,并將圖片文件添加到其中。

          接下來,我們可以使用XMLHttpRequest或fetch等方法將圖片數(shù)據(jù)發(fā)送到服務(wù)器。

          在示例中,我們使用XMLHttpRequest發(fā)送了一個POST請求,將圖片數(shù)據(jù)作為FormData發(fā)送到/upload端點。

          您需要根據(jù)您的實際情況修改URL和請求方法。

          當(dāng)請求完成時,我們可以根據(jù)響應(yīng)的狀態(tài)碼來判斷上傳是否成功。

          在示例中,如果狀態(tài)碼為200,則表示上傳成功,否則表示上傳失敗。

          請注意,由于安全性限制,JavaScript無法直接訪問用戶的文件系統(tǒng)。

          因此,用戶必須手動選擇要上傳的文件。


          主站蜘蛛池模板: 青青青国产精品一区二区| 福利一区在线视频| 精品一区高潮喷吹在线播放| 精品视频无码一区二区三区 | 精品亚洲综合在线第一区| 色噜噜狠狠一区二区| 国产微拍精品一区二区| 精品一区二区久久久久久久网站| 精品无码一区二区三区在线| 精品福利一区3d动漫| 亚洲一区二区三区四区视频| 立川理惠在线播放一区| 极品人妻少妇一区二区三区| av在线亚洲欧洲日产一区二区| 精品无码日韩一区二区三区不卡| 国产伦精品一区二区三区免费迷| 亚洲一区影音先锋色资源| 亚洲美女高清一区二区三区| 51视频国产精品一区二区| 国产成人一区二区三区在线观看| 国产亚洲福利精品一区二区| 亚洲美女视频一区| 精品无码日韩一区二区三区不卡| 熟妇人妻系列av无码一区二区| 日本免费电影一区| 国产精品一区二区电影| 国产主播一区二区三区在线观看 | 日韩精品一区二区三区老鸭窝 | 久久精品国产一区二区三| 久久精品中文字幕一区| 国产一区二区高清在线播放| 日韩有码一区二区| 亚洲一区二区三区无码影院| 国产suv精品一区二区6| 一区二区免费在线观看| 久久久久久一区国产精品| 成人日韩熟女高清视频一区| 国产高清在线精品一区二区三区| 福利一区福利二区| 久久精品国产第一区二区三区| 亚洲一区免费在线观看|