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">
 <div class="inpuys">
	<input type="file" name="file" id="uploadfile" value="選擇文件" class="cho">
	<input type="submit" value="上傳" id="submit_btn" class="sub btn btn-info">
 </div>
</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();
	    }
	}