关于使用 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:'选择文件' 

一下内容来自：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。

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