EasyUI是一款非常實用的前端UI框架,它提供了很多常用的UI組件和豐富的功能插件,讓前端開發變得更加輕松和高效。其中,文件上傳組件也是EasyUI的一大亮點,可以輕松實現文件上傳和預覽功能。本文將介紹EasyUI如何請求本地JSON文件上傳。
// HTML代碼 <form method="post" class="easyui-form" enctype="multipart/form-data"> <input name="file" class="easyui-filebox" data-options="prompt:'Select your file...', buttonIcon:'icon-upload'" /> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Upload</a> </form> // JS代碼 function submitForm() { $('.easyui-form').form('submit', { url: 'data/upload.json', onSubmit: function() { var isValid = $(this).form('validate'); if (!isValid) { $.messager.progress('close'); } return isValid; }, success: function(result) { $.messager.progress('close'); var data = JSON.parse(result); if (data.success) { $.messager.alert('Success', data.msg, 'info'); } else { $.messager.alert('Error', data.msg, 'error'); } } }); }
首先,我們在HTML中創建一個表單,包含一個文件選擇框和一個上傳按鈕。文件選擇框使用EasyUI的filebox組件,按鈕使用linkbutton組件,并設置了文件選擇框的提示和按鈕圖標。
其次,在JS中定義submitForm函數,使用form組件的submit方法提交表單。其中,url指定了上傳文件的地址,即本地的upload.json文件。onSubmit方法在提交表單前進行校驗,如果校驗不通過就關閉進度條并返回false,校驗通過就返回true。success方法在上傳成功后執行,如果成功就彈出成功提示框,否則就彈出錯誤提示框。
最后,需要注意的是,在本地請求JSON文件上傳時,需要使用HTTP服務器來打開網頁,否則會出現CORS(跨域資源共享)的錯誤。可以使用一些免費的HTTP服務器,如Node.js中的http-server或Python中的SimpleHTTPServer。
上一篇c 將json轉換int
下一篇python 深拷貝元組