input 標簽 easyui-filebox 取值操作賦值操作問題

*今天小編在前端做文件上傳操作，遇到 input 標簽 file 屬性 的上傳按鈕美化問題，在未使用
Easyui框架 easyui-filebox 屬性前，獲取文件使用 var file = $("#file").get(0).files[0]； 來獲取上傳文件是沒有問題的，但是將 input 標簽使用 class = ‘easyui-filebox’ 屬性進行美化后， 會出現：
異常報錯使程序無法正常進行，在往上也找了許多案列但都是只獲取上傳的文件名稱并不是獲取上傳的文件。也嘗試了許多獲取方式都無濟于事。
終于經過激烈的斗爭解決了此問題：如下解決方案，并整理easyui-filebox相關操作

easyui-filebox 獲取上傳文件

var file = document.getElementsByName("up_file")[0].files[0]; /*ajax上傳文件*/function submitFile(type){var fd = new FormData();var file = document.getElementsByName("up_file")[0].files[0];if (file === null) {$.messager.alert("提示","文件數據為空請正確上傳文件!");}//上傳的參數名 參數值 k-v鍵值對fd.append("file", file);$.ajax({url:"請求地址",type:"post",data:fd,cache: false,processData: false,contentType: false,success:function(data){if (data.success) {doSearch();}$.messager.alert("提示",data.message);},error:function(e){$.messager.alert("錯誤","服務器異常，請稍后重試！！！<br/>"+e.message);}});}//input標簽代碼<input id="up_file" class="easyui-filebox"data-options="buttonAlign:'right',buttonText:'選擇文件',prompt:'&nbsp&nbsp&nbsp&nbsp請選擇文件'"name="up_file" accept="xlsx" size="35"/>//后臺接收@ResponseBody@RequestMapping("/importExcel")public Object importExcel(@RequestParam("file") MultipartFile file){//省略//返回信息return Result.ok("文件：導入成功！");}

簡單整理easyui-filebox其他操作

//獲取上傳文件name值var tempFile = $("#up_file");var name = tempFile.filebox('getValue');//設置值,可用于清空回顯框$('#fileboxId').filebox('setValue','');//取文件后綴var fileType = (name.substring(name.lastIndexOf(".") + 1, name.length)).toLowerCase();if (fileType !== 'xlsx') {$.messager.alert("操作提示","文件格式不正確，請上傳&nbsp.xlsx尾綴的excel文件！");return false;}//設置按鈕$('#up_file').filebox({buttonText: '選擇文件',buttonAlign: 'left'})//相同屬性設置data-options="buttonAlign:'right',buttonText:'選擇文件'

一下內容來自：http://www.jeasyui.net/plugins/761.html

屬性

屬性擴展自 textbox，以下是新增或重寫的文件框屬性

屬性名屬性值類型描述默認值

buttonText	string	在文本框上附加的按鈕顯示的文本。	Choose File
buttonIcon	string"	在文本框上附加的按鈕顯示的圖標。	null
buttonAlign	string	附加按鈕位置。可用值有：“left”, “right”。	right
accept	string	指定接受的文件類型。
multiple	boolean	指定是否接受多文件選擇。	FALSE
separator	string	指定多個文件名稱之間的分隔符。

事件

事件擴展自 textbox。

方法

方法擴展自 textbox。

小白上路不足之處請多多指教

總結

以上是生活随笔為你收集整理的关于使用 ajax上传文件 Easyui的框架 input标签中 filebox属性取赋值操作问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。