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:'    请选择文件'"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("操作提示","文件格式不正确,请上传 .xlsx尾缀的excel文件!");return false;}//设置按钮$('#up_file').filebox({buttonText: '选择文件',buttonAlign: 'left'})//相同属性设置data-options="buttonAlign:'right',buttonText:'选择文件'
一下内容来自:/plugins/761.html
属性
属性扩展自 textbox,以下是新增或重写的文件框属性
事件
事件扩展自 textbox。
方法
方法扩展自 textbox。
小白上路不足之处请多多指教