JQueryとPHPで動的なプログレスバーのアップロード表示を実現

不言
リリース: 2023-03-30 13:02:01
オリジナル
1444 人が閲覧しました

この記事では、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 です。この項目は、アップロードされる 1 つのファイルのサイズを制限するものではありません。フォーム全体の送信されたデータ。制限の範囲には、フォームによって送信されたすべてのコンテンツが含まれます。たとえば、投稿を投稿する場合、投稿のタイトル、コンテンツ、添付ファイルなど。ここを次のように変更します。 post_max_size = 20M

検索: Upload_max_filesize = 2M、アップロードされるファイルの最大許容サイズ、次のように変更されます: Upload_max_filesize = 10M (ここでのサイズは需要に応じて決定されます)

ステップ 2: Apache 環境でのファイル アップロード サイズの制御

Apahce にあるディレクトリを変更します。次の内容を httpd.conf

LimitRequestBody 10485760

(10M=10*1024*) に追加します。 1024. いくつかの記事では、これを 600000000 に変更する必要があると述べています

Apache を再起動すると、設定で必要なサイズが表示されます

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 中国語 Web サイトをご覧ください。

関連する推奨事項:

ThinkPHP と Ajax のセカンダリ リンケージ ドロップダウン メニューの実装

以上がJQueryとPHPで動的なプログレスバーのアップロード表示を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!