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> 

我需要使用輸入的ID（#file），並使用頂部的圖片上傳js將其分配給ID為（#photo_name）的隱藏輸入。

我需要獲取（ <input type="file" name="file" id="file" /> ）的id並將其分配給（ <input type="hidden" id="photo_name" name="photo_name"> ）。

我已經有了之前發布的JS ...我需要使用它來進行ID的分配。

我已經有了輸入文件的ID，盡管JS ...（this.file [0]）已經給了我上載文件的名稱...現在我需要的是使用這個名稱並將其分配給ID隱藏的輸入。

---

我在下面的Java代碼中需要photo_name的值：

@Override受保護的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>