jQuery获取上传图片的名称

Question

//Picture upload
$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};

<form id="form_roomtype" class="form-horizontal" style="padding-top: 57px;" action="roomtype" method="POST" enctype="multipart/form-data">
  <input type="hidden" id="current_roomtype_id" name="current_roomtype_id" value="0">
  <input type="hidden" id="roomtype_id_to_remove" name="roomtype_id_to_remove" value="0">
  <input type="hidden" id="chk_tarif_applicable" name="chk_tarif_applicable" value="0">
  <input type="hidden" id="photo_name" name="photo_name">

  <div>
    <span style="font-size: 16.85px; font-family: Arial, Helvetica, sans-serif; color: #757575;">ROOM PICTURE</span>
    <br />
    <br />
    <input type="file" name="file" id="file" />
    <br/>

    <img id="myImg" src="<%=request.getContextPath()%>/images/insert_images.png" alt="room image" height="175" width="285" onclick="file" />
    <br />Destination:
    <input type="text" value="C:\Project\Booking_Engine\Java\booking\src\main\webapp\data" name="destination" />
    </br>
    <br />
    <input type="submit" value="Upload" name="upload" id="upload" />
  </div>
</form>

我需要获取输入 (#file) 的 id，并使用顶部的图片上传 js 将其分配给具有 id (#photo_name) 的隐藏输入。

我需要获取 (<input type="file" name="file" id="file" />) 的 id 并将其分配给 (<input type="hidden" id="photo_name" name="photo_name">) 的 id。

我之前发的JS已经有了……我需要用它来分配id。

虽然 JS...（this.file[0]）已经给了我上传文件的名称，但我已经有了输入文件的 ID...现在我需要的是取这个名称并将其分配给隐藏输入的 id。

---

我需要以下 java 代码中 photo_name 的值：

@覆盖 protected void doPost（HttpServletRequest 请求，HttpServletResponse 响应） 抛出 ServletException, IOException {

    String currentRoomTypeIdStr = request.getParameter("current_roomtype_id");
    Integer currentRoomTypeId = Integer.valueOf(currentRoomTypeIdStr);

    String photoName = request.getParameter("photo_name");

if (!Objects.equals(currentRoomTypeId, null) || !Objects.equals(roomtypeIdToRemove, null)) { 尝试 { mUserTransaction.begin();

            if (currentRoomTypeId == 0) { // Add mode
                ChambreTypeEntity typeChambreEntity = new ChambreTypeEntity();
                typeChambreEntity.setLibelle(inputTypeRoom);
                typeChambreEntity.setCode(inputCodeRoom);
                typeChambreEntity.setDescription(inputDescriptionRoom);
                typeChambreEntity.setNbMinPers(inputMinPerson);
                typeChambreEntity.setNbMaxPers(inputMaxPerson);
                typeChambreEntity.setNbEnfGratuit(inputChild);
                mEntityManager.persist(typeChambreEntity);


                ChambrePhotoEntity chambrePhotoEntity = new ChambrePhotoEntity();
                chambrePhotoEntity.setNomPhoto(photoName);
                chambrePhotoEntity.setTypeChambre(currentRoomTypeId);
                mEntityManager.persist(chambrePhotoEntity);

            }
            else { // Modification mode
                Query query = mEntityManager.createQuery("FROM ChambreTypeEntity WHERE id=:pId")
                        .setParameter("pId", currentRoomTypeId);
                List<ChambreTypeEntity> typeChambreEntityList = query.getResultList();
                if (!typeChambreEntityList.isEmpty()) {
                    ChambreTypeEntity typeChambreEntity = typeChambreEntityList.get(0);
                    typeChambreEntity.setLibelle(inputTypeRoom);
                    typeChambreEntity.setCode(inputCodeRoom);
                    typeChambreEntity.setDescription(inputDescriptionRoom);
                    typeChambreEntity.setNbMinPers(inputMinPerson);
                    typeChambreEntity.setNbMaxPers(inputMaxPerson);
                    typeChambreEntity.setNbEnfGratuit(inputChild);
                    mEntityManager.persist(typeChambreEntity);
                    mEntityManager.persist(chambreTypeTarifTypeEntity);

                    ChambrePhotoEntity chambrePhotoEntity = new ChambrePhotoEntity();
                    chambrePhotoEntity.setNomPhoto(photoName);
                    chambrePhotoEntity.setTypeChambre(currentRoomTypeId);
                    mEntityManager.persist(chambrePhotoEntity);


                }
            }
            mUserTransaction.commit();
        }

但是现在 photo_name 的值是 ""。我需要它是我在选择图片时选择的值。

Answer 1

以下是您要查找的内容吗？

//Picture upload
$(function() {
  // This is a better way of selecting the input field
  $("input[name^=file]").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);

      // This is what you should do
      $('#photo_name').val(this.files[0].name);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_roomtype" class="form-horizontal" style="padding-top: 57px;" action="roomtype" method="POST" enctype="multipart/form-data">
  <input type="hidden" id="current_roomtype_id" name="current_roomtype_id" value="0">
  <input type="hidden" id="roomtype_id_to_remove" name="roomtype_id_to_remove" value="0">
  <input type="hidden" id="chk_tarif_applicable" name="chk_tarif_applicable" value="0">
  <input type="hidden" id="photo_name" name="photo_name">

  <div>
    <span style="font-size: 16.85px; font-family: Arial, Helvetica, sans-serif; color: #757575;">ROOM PICTURE</span>
    <br />
    <br />
    <input type="file" name="file" id="file" />
    <br/>

    <img id="myImg" src="<%=request.getContextPath()%>/images/insert_images.png" alt="room image" height="175" width="285" onclick="file" />
    <br />Destination:
    <input type="text" value="C:\Project\Booking_Engine\Java\booking\src\main\webapp\data" name="destination" />
    </br>
    <br />
    <input type="submit" value="Upload" name="upload" id="upload" />
  </div>
</form>