jQuery是目前最為流行的JavaScript庫之一,除了提供便捷的DOM操作、CSS樣式操作和事件處理等基本功能之外,還有很多實用的插件可以節約開發者的時間和精力。其中一個非常實用的插件就是jquery.form.js,它可以實現異步上傳文件。
在使用jquery.form.js之前,你需要先引入jQuery庫和jquery.form.js文件。
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js"></script>
然后我們需要在HTML中建立一個表單,用于上傳文件。
<form id="upload-form" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="button" value="上傳文件" /> </form>
上面的代碼中,id為“upload-form”的表單有一個type為“file”的input標簽用于選擇文件,另一個type為“button”的input標簽用于執行上傳操作。這里需要注意的是,表單的enctype屬性一定要設置為“multipart/form-data”,否則無法上傳文件。
接下來我們使用jQuery選擇器選中這個表單,然后調用jquery.form.js提供的ajaxForm方法來提交表單。
$('#upload-form').ajaxForm({ url: 'upload.php', type: 'post', dataType: 'json', beforeSubmit: function() { // 文件上傳之前的一些操作 }, success: function(response) { // 文件上傳成功后的回調函數 }, error: function(response) { // 文件上傳失敗后的回調函數 } });
在ajaxForm方法中,url屬性指定了文件上傳的目標地址,如果是在同一個域名下,可以使用相對路徑;type屬性指定了HTTP請求的方法,常用的有get和post;dataType屬性指定了服務器返回的數據類型,默認為普通文本。beforeSubmit、success和error屬性分別指定了文件上傳之前、上傳成功和上傳失敗時的回調函數。
接下來我們就可以在上傳按鈕的點擊事件中調用submit方法來執行表單提交了。
$('#upload-form input[type="button"]').click(function() { $('#upload-form').submit(); });
以上就是jquery.form.js提交文件上傳的基本流程了,需要注意的是,由于文件上傳是比較耗時的操作,所以在調用ajaxForm方法提交表單之前,最好需要進行用戶提示,比如顯示進度條或者禁用上傳按鈕等。