200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 关于使用 ajax上传文件 Easyui的框架 input标签中 filebox属性取赋值操作问题

关于使用 ajax上传文件 Easyui的框架 input标签中 filebox属性取赋值操作问题

时间:2021-06-02 03:44:44

相关推荐

关于使用 ajax上传文件 Easyui的框架 input标签中 filebox属性取赋值操作问题

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:'选择文件'

一下内容来自:/plugins/761.html

属性

属性扩展自 textbox,以下是新增或重写的文件框属性

事件

事件扩展自 textbox。

方法

方法扩展自 textbox。

小白上路不足之处请多多指教

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。