Ajax 이미지 업로드 및 미리 보기 기능 구현
최근 ThinkpHP 5 개발 프로젝트 를 사용 하 는 고객 들 의 요 구 는 사진 을 업로드 할 때 미리 보기 기능 을 추가 하 는 것 이다.현재 많은 플러그 인 이 실 현 될 수 있 지만 스스로 쓰 는 것 이 좋다 고 생각 합 니 다.사진 업로드 에 input:file 폼 이 필요 하 다 는 것 을 알 고 있 습 니 다.
<input type='file' name='pic'>
우리 가 폼 을 클릭 할 때 업로드 할 그림 을 선택 하 라 고 알려 줍 니 다.그러나 이 수 요 를 분석 해 보면 그림 을 클릭 할 때 JS 를 사용 하여 미리 보기 기능 을 실현 할 수 있 고 건물 주도 이렇게 할 수 있다.코드 는 다음 과 같 습 니 다:
function getFileUrl(sourceId) {
var url;
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
return url;
}
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
효 과 는 다음 과 같 습 니 다:하지만 이렇게 되면 호환성 문제 가 많다.그래서 아 약 스 가 사진 을 올 릴 때 아 약 스 기술 을 사용한다 고 생각 했 어 요.서버 에 사진 을 올 리 고 서버 에서 사진 의 업로드 주 소 를 되 돌려 주 고 img 태그 에 추가 합 니 다.과정 이 좀 번 거 롭 지만 친 측 에 서 는 호 환 문제 가 없 을 것 이다.
Ajax 요청 을 보 내야 한다 면,물론 input:file 폼 은 우리 의 요 구 를 실현 할 수 없습니다.따라서,우 리 는 폼 에 이 벤트 를 클릭 하여 Ajax 요청 을 하고 그림 을 선택해 야 합 니 다.
<form id="form1">
<label for="exampleInputEmail1"> </label>
<input type="button" value=" " onclick="f.click()" class="btn_mouseout"/><br>
<p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p>
</form>
<div id="result"></div>
우리 가 사진 업로드 버튼 을 눌 렀 을 때 input:file 그림 을 선택 하여 Ajax 업 로드 를 실현 합 니 다.
<script>
function sc(){
var animateimg = $("#f").val(); // //
var imgarr=animateimg.split('\\'); //
var myimg=imgarr[imgarr.length-1]; // //
var houzui = myimg.lastIndexOf('.'); // .
var ext = myimg.substring(houzui, myimg.length).toUpperCase(); // .
var file = $('#f').get(0).files[0]; //
var fileSize = file.size; //
var maxSize = 1048576; // 1MB
if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){
parent.layer.msg(' , ');
return false;
}else if(parseInt(fileSize) >= parseInt(maxSize)){
parent.layer.msg(' 1MB');
return false;
}else{
var data = new FormData($('#form1')[0]);
$.ajax({
url: "{:url('User/uppic')}",
type: 'POST',
data: data,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false
}).done(function(ret){
if(ret['isSuccess']){
var result = '';
var result1 = '';
// $("#show").attr('value',+ ret['f'] +);
result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">';
result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">';
$('#result').html(result);
$('#show').html(result1);
layer.msg(' ');
}else{
layer.msg(' ');
}
});
return false;
}
}
</script>
여기 서 저 희 는 FormData 맞은편 에서 폼 을 제출 한 다음 에 서버 에서 받 습 니 다.
public function uppic()
{
$file = request()->file('f');
$info = $file->move(ROOT_PATH . 'public/uploads/avatar');
$a=$info->getSaveName();
$imgp= str_replace("\\","/",$a);
$imgpath='uploads/avatar/'.$imgp;
$banner_img= $imgpath;
$response = array();
if($info){
$response['isSuccess'] = true;
$response['f'] = $imgpath;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
}
그림 이 올 린 url 경 로 를 되 돌려 줍 니 다:$response['f] = $imgpath
;지금 우리 가 해 야 할 일 은 이 url 을 프론트 데스크 톱 HTML 부분 에 써 서 표시 하 는 것 이다.
<div class="form-group">
<!-- Ajax -->
<div id="show"></div>
</div>
JS 에 추가
$('#show').html(result1);
총결산위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Ajax 가 사진 업로드 와 미리 보기 기능 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.