jquery.form.js是一個非常強大的用於表單提交的插件。
通過該插件，我們可以非常簡單的實現表單的異步提交，並實現文件上傳、進度條顯示等等。
前端頁面:
1 <!doctype html> 2 <head> 3 <meta charset=utf-8> 4 <title>File Upload Progress Demo</title> 5 <style> 6 body { padding: 30px } 7 form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 8 9 .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 10 .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } 11 .percent { position:absolute; display:inline-block; top:3px; left:48%; } 12 </style> 13 </head> 14 <body> 15 <form action="upload.php" method="post" enctype="multipart/form-data"> 16 <input type="file" name="myfile" /><br> 17 <input type="submit" value="Upload File to Server"> 18 </form> 19 20 <div class="progress"> 21 <div class="bar"></div > 22 <div class="percent">0%</div > 23 </div> 24 25 <div id="status"></div> 26 27 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 28 <script src="jquery.form.js"></script> 29 <script> 30 31 $(function(){ 32 var bar = $('.bar'); 33 var percent = $('.percent'); 34 var status = $('#status'); 35 $('form').ajaxForm({ 36 beforeSerialize:function(){ 37 //alert("表單數據序列化前執行的操作！"); 38 //$("#txt2").val("java");//如：改變元素的值 39 }, 40 beforeSubmit:function(){ 41 //alert("表單提交前的操作"); 42 var filesize = $("input[type='file']")[0].files[0].size/1024/1024; 43 if(filesize > 50){ 44 alert("文件大小超過限制，最多50M"); 45 return false; 46 } 47 //if($("#txt1").val()==""){return false;}//如：驗證表單數據是否為空 48 }, 49 beforeSend: function() { 50 status.empty(); 51 var percentVal = '0%'; 52 bar.width(percentVal) 53 percent.html(percentVal); 54 }, 55 uploadProgress: function(event, position, total, percentComplete) {//上傳的過程 56 //position 已上傳了多少 57 //total 總大小 58 //已上傳的百分數 59 var percentVal = percentComplete + '%'; 60 bar.width(percentVal) 61 percent.html(percentVal); 62 //console.log(percentVal, position, total); 63 }, 64 success: function(data) {//成功 65 var percentVal = '100%'; 66 bar.width(percentVal) 67 percent.html(percentVal); 68 alert(data); 69 }, 70 error:function(err){//失敗 71 alert("表單提交異常！"+err.msg); 72 }, 73 complete: function(xhr) {//完成 74 status.html(xhr.responseText); 75 } 76 }); 77 78 }); 79 80 </script>
upload.php
1 <?php 2 if (!empty($_FILES['myfile'])) {//判斷上傳內容是否為空 3 if ($_FILES['myfile']['error'] > 0) {//判斷上傳錯誤信息 4 echo "上傳錯誤："; 5 switch ($_FILES['myfile']['error']) { 6 case 1: 7 echo "上傳文件大小超出配置文件規定值"; 8 break; 9 case 2: 10 echo "上傳文件大小超出表單中的約定值"; 11 break; 12 case 3: 13 echo "上傳文件不全"; 14 break; 15 case 4: 16 echo "沒有上傳文件"; 17 break; 18 } 19 } else { 20 list($maintype, $subtype) = explode("/", $_FILES['myfile']['type']); 21 if (/*$maintype != "image" || $subtype != "png"*/false) {//如果要限制文件格式，就去掉注釋 22 echo "上傳文件格式不正確"; 23 } else { 24 if (!is_dir("./upfile")) {//判斷指定目錄是否存在 25 mkdir("./upfile");//創建目錄 26 } 27 $path = './upfile/' . time() . strtolower(strstr($_FILES['myfile']['name'], "."));//定義上傳文件名和存儲位置 28 if (is_uploaded_file($_FILES['myfile']['tmp_name'])) {//判斷文件上傳是否為HTTP POST上傳 29 if (!move_uploaded_file($_FILES['myfile']['tmp_name'],$path)) {//執行上傳操作 30 echo "上傳失敗"; 31 } else { 32 echo "文件:" . time() . strtolower(strstr($_FILES['myfile']['name'], ".")) . "上傳成功，大小為：" . $_FILES['myfile']['size'] . "字節"; 33 } 34 } else { 35 echo "上傳文件：".$_FILES['myfile']['name']."不合法"; 36 } 37 } 38 } 39 }