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>

我需要输入输入的id（#file）并使用顶部的图片上传js将其分配给id（#photo_name）的隐藏输入。

我需要获取（<input type="file" name="file" id="file" />）的ID并将其指定为（<input type="hidden" id="photo_name" name="photo_name">）的ID。

我之前已经发布了JS ...我需要用它来分配id。

我已经拥有了输入文件的ID，虽然JS ...（this.file [0]）已经给我上传文件的名称...现在我需要的是取这个名字并将其分配给隐藏输入的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>

jQuery获取上传图片的名称

1 个答案: