PHP+Ajax 리 셋 없 음 진행 막대 이미지 업로드 예시
최근 에 핸드폰 웹 프로젝트 를 만 들 려 면 Ajax 에서 공 을 전달 하 는 이미지 에 너 지 를 사용 해 야 합 니 다.프로젝트 는 PHP 에 새로 고침 없 이 사진 을 올 리 도록 요구 하고 진도 표를 가 져 가 야 합 니 다.다음은 제 실현 방법 을 말씀 드 리 겠 습 니 다.먼저 효과 도 를 보 겠 습 니 다.
이 예제 에서 사용 해 야 할 것 은 jquery.js,jquery.form.js 입 니 다.demo 에 포함 되 어 있 습 니 다.글 아래 에서 다운로드 할 수 있 습 니 다.
첫 번 째,전단 페이지 index.html 만 들 기
이 단락 은 전단 전시 내용 입 니 다.여기 서 설명 해 야 할 것 은 input:file 태그 가 그다지 아름 답지 않 기 때문에 제 가 숨 겼 습 니 다.파일 탭 을 열 고 선택 하기 위해 a 탭.uploadbtn 을 사용 합 니 다.
메모:파일 업로드 시 form 의 속성 enctype 은 multipart/form-data 로 설정 해 야 합 니 다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php-ajax ( )demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
</head>
<body>
<div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
<form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
<input type="file" id="uploadphoto" name="uploadfile" value=" " style="display:none;" />
</form>
<div class="imglist"> </div>
<p class="res"></p>
<div class="progress">
<div class="progress-bar progress-bar-striped"><span class="percent">50%</span></div>
</div>
<a href="javascript:void(0);" rel="external nofollow" onclick="uploadphoto.click()" class="uploadbtn"> </a>
</div>
</body>
</html>
이 부분 은 Ajax 의 제출 부분 입 니 다.과정 은 다음 과 같 습 니 다.
4
<script type="text/javascript">
$(document).ready(function(e) {
var progress = $(".progress");
var progress_bar = $(".progress-bar");
var percent = $('.percent');
$("#uploadphoto").change(function(){
$("#myupload").ajaxSubmit({
dataType: 'json', // json
beforeSend: function() { //
progress.show();
var percentVal = '0%';
progress_bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%'; //
progress_bar.width(percentVal); //
percent.html(percentVal); //
},
success: function(data) {
if(data.status == 1){
var src = data.url;
var attstr= '<img src="'+src+'">';
$(".imglist").append(attstr);
$(".res").html(" "+data.name+" ， ："+data.size+"K, ："+data.url);
}else{
$(".res").html(data.content);
}
progress.hide();
},
error:function(xhr){ //
alert(" ");
progress.hide();
}
});
});
});
</script>
백 엔 드 처리 코드 는 PHP 파일 업로드 이지 만 업로드 할 때 파일 형식,파일 크기 등 을 판단 해 야 합 니 다.
메모:위 에 있 는 ajax 반환 형식 은 json 이기 때문에 그림 json 코드 는 반드시 정확하게 규범화 되 어야 합 니 다.그렇지 않 으 면 업로드 에 성공 하지 못 한 알림 이 나타 날 수 있 습 니 다.
$picname = $_FILES['uploadfile']['name'];
$picsize = $_FILES['uploadfile']['size'];
if ($picname != "") {
if ($picsize > 2014000) { //
echo '{"status":0,"content":" 2M"}';
exit;
}
$type = strstr($picname, '.'); //
if ($type != ".gif" && $type != ".jpg" && $type != "png") {
echo '{"status":2,"content":" ！"}';
exit;
}
$rand = rand(100, 999);
$pics = uniqid() . $type; //
//
$pic_path = "images/". $pics;
move_uploaded_file($_FILES['uploadfile']['tmp_name'], $pic_path);
}
$size = round($picsize/1024,2); // kb
echo '{"status":1,"name":"'.$picname.'","url":"'.$pic_path.'","size":"'.$size.'","content":" "}';
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
