루프에서 여러 이미지를 선택하고 jQuery를 사용하여 개별적으로 표시
알리 칸 사리
이미지를 선택하는 루프 버튼이 있습니다.
@foreach (var item in image)
{
<label class="control-label col-md-7 ">
select image
</label>
<img id="imgworksample" src="~/site/imgworksample/@item.imageName" class="img-
thumbnail" />
<input type="hidden" value="@item.ImageId" />
<input id="img_worksampleupload" name="imgpostupload" type="file" />
<hr />
}
루프 내부의 버튼 브라우저를 클릭하고 싶습니다. 이미지를 선택하고 표시합니까?
jQuery로 수행하는 방법?
이것은 하나의 브라우저 버튼에 대해 작동합니다.
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgworksample').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#img_worksampleupload").change(function () {
readURL(this);
});
</script>
한 페이
루프 내부의 버튼 브라우저를 클릭하고 싶습니다. 이미지를 선택하고 표시합니까?
html 요소를 loop 문에 넣으면 현재 HTML 문서 내 에서 id속성 값이 고유하지 않게 됩니다.
페이지에서 선택한 이미지를 표시 / 미리보기하려면 아래와 같이 코드를 수정할 수 있습니다.
@foreach (var item in image)
{
<label class="control-label col-md-7 ">
select image
</label>
<img src="~/site/imgworksample/@item.imageName" class="imgworksample img-
thumbnail" />
<input type="hidden" value="@item.ImageId" />
<input class="img_worksampleupload" name="imgpostupload" type="file"/>
<hr />
}
jQuery 코드
<script>
function readURL(input, imgcontainer) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imgcontainer).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".img_worksampleupload").change(function () {
//find target image container and pass it as parameter to custom function
var target_imgtag = $(this).prev().prev();
readURL(this, target_imgtag);
});
</script>
검사 결과
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
갤러리에서 여러 이미지를 선택하고 recyclerview에 표시
- 2
Android 갤러리에서 여러 이미지를 개별적으로 선택하는 방법
- 3
for 루프를 사용하여 django 모델에서 템플릿으로 이미지 표시
- 4
Bash를 사용하여 루프에 이미지 표시
- 5
기호를 사용하여 for 루프에서 개수 표시
- 6
다른 ID로 html 파일에 여러 'div'를 작성하고 Flask에서 if-else 문을 사용하여 선택적으로 표시 할 수 있습니까?
- 7
foreach 루프를 사용하여 배열에서 이미지 표시
- 8
클릭시 여러 div를 개별적으로 표시하려고합니다.
- 9
with ()를 사용하여 여러 테이블에서 특정 열을 선택하고 ()를 선택하십시오.
- 10
루프를 사용하여 여러 플롯을 만들고 하나에 별도의 플롯 표시
- 11
Android에서 Directions API를 사용하여 여러 경로 표시
- 12
setTimeout 및 for 루프를 사용하여 이미지 표시
- 13
iOS에서 for 루프를 사용하여 여러 행과 두 열의 이미지 수를 기준으로 이미지보기를 정렬하고 싶습니다.
- 14
jquery를 사용하여 이미지를 왼쪽에서 오른쪽으로 표시합니다.
- 15
여러 이미지를 선택하지만 Javascript를 사용하여 별도의 위치에 데이터 저장
- 16
갤러리에서 이미지를 선택하고 다른 활동에 표시
- 17
RecyclerView에서 Firebase 저장소를 사용하여 여러 사용자의 이미지를 표시하는 방법
- 18
MATLAB에서 세미로지를 사용하는 동안 여러 그래프를 표시 할 수 없음
- 19
FileReader를 사용하여 이미지 선택 및 표시
- 20
Java에서 for 루프를 사용하여 별표 인쇄
- 21
for 루프를 사용하여 PIL에서 여러 이미지 열기
- 22
JQuery를 사용하여 확인란을 선택하면 여러 Div를 숨기고 표시하는 방법
- 23
루프를 사용하여 Java에서 라인 표시
- 24
C ++를 사용하여 OpenGL ES 3.0에서 이미지를로드하고 표시하는 방법
- 25
Django의 FileField를 사용하여 Admin에서 이미지 업로드 표시
- 26
미로에서 여러 목표를 검색하는 별 알고리즘 개선
- 27
선택기 선택을 사용하여 이미지를 UIImage보기에 표시하는 방법
- 28
AJAX Jquery를 사용하여 검색된 이미지 URL을 JSON으로 표시
- 29
저장 프로 시저를 사용하여 mysql에서 값을 선택하고 삽입하는 방법
몇 마디 만하겠습니다