javascript - 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>

我需要使用顶部的图片上传 js 获取输入的 id (#file) 并将其分配给 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>