Layui实现文件上传：浏览不自动上传，在文本框中显示文件名

Layui实现文件上传的各种方式，拖拽，直接上传，格式限制上传等等在Layui的官方文档中都有详细的说明以及实例，困扰我的是如何在选择文件没上传之前将文件名显示在文本框内。

如图：

基本上就是设置一个输入框，然后增加一个placeholder属性，指引别人点击右侧浏览，然后把文本框禁止输入。代码如下，我们给一个id="name"。

<input type="text" readonly="readonly" name="title" required lay-verify="required"
                           placeholder="请点击右侧浏览"
                           autocomplete="off" class="layui-input" id="name">

下面是js：

, choose: function (obj) {
        //将每次选择的文件追加到文件队列
        var files = obj.pushFile();
        console.log(obj)

        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
        obj.preview(function (index, file, result) {
            console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            console.log(result); //得到文件base64编码，比如图片

console.log（）打印出拿到的file，我们打开浏览器的控制台可以看到file里面已经抓到了图片名name：

那么我们在js文件里面加上

 document.getElementById('name').value = file.name

//name 是input框的id
//file.name 是刚刚拿到的数据

放在下列位置

  //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
        obj.preview(function (index, file, result) {
            console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            console.log(result); //得到文件base64编码，比如图片
            //获取文件名***************************
            document.getElementById('name').value = file.name

下面是关于文件上传完整的的JS代码:

upload.render({
    elem: '#test8'
    , url: 'https://httpbin.org/post' //改成您自己的上传接口
    , auto: false
    //,multiple: true
    , bindAction: '#test9'
    , choose: function (obj) {
        //将每次选择的文件追加到文件队列
        var files = obj.pushFile();
        console.log(obj)

        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
        obj.preview(function (index, file, result) {
            console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            console.log(result); //得到文件base64编码，比如图片
            //获取文件名***************************
            document.getElementById('name').value = file.name


            //这里还可以做一些 append 文件列表 DOM 的操作

            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
            //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
        });
    }

    , done: function (res) {
        layer.msg('上传成功');
        console.log(res)
    }
});

即可实现选择文件后文件名自动载入文本框

Layui实现文件上传：浏览不自动上传，在文本框中显示文件名

猜你喜欢