진행률 표시줄이 있는 PHP+Ajax 새로 고치지 않는 이미지 업로드 예-PHP 튜토리얼-php.cn

진행률 표시줄이 있는 PHP+Ajax 새로 고치지 않는 이미지 업로드 예

高洛峰

풀어 주다： 2023-03-05 16:58:02

원래의

1700명이 탐색했습니다.

이 글에서는 새로고침 없이 진행률 표시줄을 사용하여 PHP+Ajax 이미지를 업로드하는 예를 주로 소개하고, 새로고침하지 않고 진행률 표시줄을 사용하여 PHP에서 이미지를 업로드하는 코드를 자세히 정리했습니다.

프로젝트 요구 사항: 1. 새로 고침 없이 진행률 표시줄이 있는 PHP+Ajax 이미지 업로드, 2. 진행률 표시줄 포함. 필수 플러그인: jquery.js, jquery.form.js.

저는 현재 Ajax 업로드 기능이 필요한 모바일 웹 프로젝트를 진행하고 있습니다. 이 프로젝트에서는 새로 고치지 않고 진행률 표시줄이 있는 이미지를 업로드하기 위해 PHP가 필요합니다. 그림

진행률 표시줄이 있는 PHP+Ajax 새로 고치지 않는 이미지 업로드 예

이 예제에서는 데모에 포함된 jquery.js, jquery.form.js를 사용해야 합니다. 기사.

첫 번째 단계는 프런트 엔드 페이지 index.html을 만드는 것입니다

이 섹션은 프런트 엔드 디스플레이 콘텐츠입니다. 여기서 설명해야 할 것은 input:file 태그라는 것입니다. 별로 아름답지 않아서 숨깁니다. 그리고 .uploadbtn 태그를 사용하여 파일 태그의 클릭 이벤트를 호출하여 파일을 열고 선택합니다.

참고: 파일을 업로드할 때 양식 속성 enctype을 multipart/form-data

nbsp;HTML>


<meta>
<title>php-ajax无刷新上传(带进度条)demo</title>
<meta>
<meta>
<script></script>
<script></script>
<link>


<p>
 </p>

로그인 후 복사

50%

点击上传文件

두 번째 단계, Ajax 제출 부분

Ajax의 제출 부분입니다.

beforeSend를 통해 진행률 표시줄이 표시되도록 설정합니다. 제출 시작 시 콜백 함수. 진행률 표시줄의 너비는 0%이고 진행률 값은 0%입니다.
업로드 과정에서 데이터가 실시간으로 반환됩니다. uploadProgress 콜백 함수는 진행률 표시줄의 너비와 진행률 값을 변경합니다.
업로드 성공 후 업로드된 데이터 정보(이미지 이름, 크기, 주소 등)가 성공 콜백 함수를 통해 출력되며 해당 이미지는 미리보기용 페이지로 출력됩니다. .
물론 실패할 경우 높이 조절을 도와주는 에러 콜백 함수가 있습니다.

<script>
$(document).ready(function(e) {
 var progress = $(".progress"); 
 var progress_bar = $(".progress-bar");
 var percent = $(&#39;.percent&#39;);
 $("#uploadphoto").change(function(){
 $("#myupload").ajaxSubmit({ 
 dataType: &#39;json&#39;, //数据格式为json 
 beforeSend: function() { //开始上传 
 progress.show();
 var percentVal = &#39;0%&#39;;
 progress_bar.width(percentVal);
 percent.html(percentVal);
 }, 
 uploadProgress: function(event, position, total, percentComplete) { 
 var percentVal = percentComplete + &#39;%&#39;; //获得进度 
 progress_bar.width(percentVal); //上传进度条宽度变宽 
 percent.html(percentVal); //显示上传进度百分比 
 }, 
 success: function(data) {
 
 if(data.status == 1){
 var src = data.url; 
 var attstr= &#39;<img  src="&#39;+src+&#39;" alt="진행률 표시줄이 있는 PHP+Ajax 새로 고치지 않는 이미지 업로드 예" >&#39;; 
 $(".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 코드 upload.php

백엔드 처리 code는 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":"上传成功"}';

로그인 후 복사

데모 다운로드: php-ajax-upload_jb51.rar

위는 전체 내용입니다 이 기사가 모든 사람의 학습에 도움이 되기를 바라며, 또한 모든 사람이 PHP 중국어 웹사이트를 지지하기를 바랍니다.

진행 표시줄 이미지 업로드 예제와 관련 기사가 포함된 PHP+Ajax 비새로고침에 대한 자세한 내용을 보려면 PHP 중국어 웹사이트에 주목하세요!