JQuery和PHP實現動態進度條的上傳顯示

本文給大家介紹JQuery和PHP結合實現動態進度條上傳顯示功能，本文分步驟給大家介紹的非常詳細，感興趣的朋友一起看看吧

Windows 環境下的修改方法

第一步：修改在php5下POST檔案大小的限制

1.編修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 （這裡的大小根據需求來定）

第二步： 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('file');// 移動到架構應用根目錄/public/uploads/ 目錄下$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');if($info){return "上傳成功";}else{// 上傳失敗擷取錯誤資訊echo $file->getError();}}

以上就是本篇文章的全部內容了，感謝大家的閱讀，更多相關內容請關注topic.alibabacloud.com！