집 > 기사 > 백엔드 개발 > JQuery와 PHP는 동적 진행률 표시줄의 업로드 표시를 실현합니다.

JQuery와 PHP는 동적 진행률 표시줄의 업로드 표시를 실현합니다.

不言원래의: 2018-06-07 14:14:581455검색

이 글에서는 JQuery와 PHP를 결합하여 동적 진행률 표시줄 업로드 표시 기능을 구현하는 방법을 단계별로 자세히 소개합니다. 관심 있는 친구들은 함께 살펴보세요

수정 방법. Windows 환경

1단계: php5

1에서 POST 파일 크기 제한을 수정합니다. php.ini

를 편집하고 다음을 찾습니다: max_execution_time = 30. 이는 각 스크립트가 실행되는 최대 시간입니다. 초로 변경합니다: max_execution_time = 150

발견: max_input_time = 60, 이는 각 스크립트가 소비할 수 있는 시간입니다. 단위도 초이며 다음과 같이 수정됩니다.

max_input_time = 300

발견: memory_limit = 128M, 이것은 은 실행 중인 스크립트에서 소비하는 최대 메모리입니다. 필요한 변경 값은 여기에서 다음과 같이 수정됩니다: memory_limit = 256M

발견: post_max_size = 8M, 양식으로 제출된 최대 데이터는 8M입니다. 이 항목은 크기를 제한하지 않습니다. 하나의 업로드된 파일이지만 제출된 데이터는 전체 양식으로 제한됩니다. 제한 범위에는 양식으로 제출된 모든 콘텐츠가 포함됩니다. 예: 게시물 게시 시 게시물 제목, 콘텐츠, 첨부 파일 등.... 여기에서 다음과 같이 수정됩니다. post_max_size = 20M

발견: upload_max_filesize = 2M, 최대값 업로드된 파일의 허용 크기는 다음과 같이 수정됩니다: upload_max_filesize = 10M(여기서의 크기는 수요에 따라 결정됩니다.)

2단계: Apache 환경에서 파일 업로드 크기 제어

Apahce 디렉터리에 있는 httpd.conf를 수정합니다.

다음 내용을 추가하세요

LimitRequestBody 10485760

즉, 10M=10*1024*1024. 일부 기사에서는 600000000

아파치를 다시 시작하면 설정에서 원하는 크기를 확인할 수 있다고 언급했습니다

HTML 부분

<form action="index/index/upload" method="POST" enctype="multipart/from-data" id="uploadform" onSubmit="return false">
<p class="inpuys">
<input type="file" name="file" id="uploadfile" value="选择文件" class="cho">
<input type="submit" value="上传" id="submit_btn" class="sub btn btn-info">
</p>
</form>

JS 부분

<script type="text/javascript" src="{$Think.config.web_root}js/jquery.min.js"></script>
<script type="text/javascript" src="{$Think.config.web_root}js/jquery.form.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var progressbox=$("#progressbox");
var progressbar=$("#progressbar");
var progress=$("#progress");
var completed="0%";
var options={
beforeSubmit:beforeSubmit,
uploadProgress:OnProgress,
success:afterSuccess,
resetForm:true
};
$("#uploadform").submit(function(){
$(this).ajaxSubmit(options);
return false;
});
function OnProgress(event,position,total,percentComplete ) {
progressbar.width(percentComplete + "%");
progress.html(percentComplete + "%");
}
function afterSuccess(){
$("#output").html("上传完成!!");
}
function beforeSubmit(){
if (!$("#uploadfile").val()) {
$("#output").html("请选择文件!!");
return false;
}
progressbar.width(completed);
progress.html(completed);
}
});
</script>

THINKPHP 메소드 부분

public function upload(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file(&#39;file&#39;);
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
if($info){
return "上传成功";
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}

이상은 이 글의 전체 내용입니다. 읽어주신 모든 분들께 감사드립니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

JQuery와 PHP는 동적 진행률 표시줄의 업로드 표시를 실현합니다.

관련 기사