HTML中隐藏默认文件表单样式

问题

 在html中有默认的文件表单,但是样式就不怎么恭维了。现在有一个需求是上传图片的功能,后端接受的是图片url地址,这里的想法是两个表单,一个是文本表单用于接受url地址,还有一个是文件表单,用于接收文件。

 这里首先把文件表单隐藏掉,通过点击按钮的形式触发文件表单事件。

先看图

最终图.PNG

html代码

 <div class="input-group">
             <input type="text" class="form-control" id="example-img-href"   placeholder="请输入图片地址...">
             <input type="file" id="input_file" style="display:none" onchange="updateImg()" accept=".jpg,.png">
             <span class="input-group-btn">
                    <button class="btn btn-secondary" id="example_btn_update_fiel_img" type="button">上传</button>
             </span>
 </div>

js代码

// 点击上传按钮
    $("#example_btn_update_fiel_img").click(function () {
        $("#input_file").click()
    })

// 在input type = file 发生改变时出发函数
    function updateImg() {
        if($('#input_file')[0].files[0] == null){
            return false
        }
        var myform = new FormData();
        myform.append('file',$('#input_file')[0].files[0]);
        $.ajax({
            url:'/admin/insert/file/slideshow',
            type:'post',
            data: myform,
            contentType: false,
            processData: false,
            success:function(data){
                if(data.code == 200){
                    $("#example-img-href").val(data.result)
                    lightyear.notify('上传成功~ ~ ~', 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }else{
                    lightyear.notify('上传失败~ ~ ~', 'danger', 2000, 'mdi mdi-comment-remove-outline', 'top', 'center');
                }
            },
            error: function (err) {
                lightyear.notify('服务器错误~ ~ ~', 'danger', 2000, 'mdi mdi-comment-remove-outline', 'top', 'center');
            }
        })
    }

分析

 通过html代码,我是把file文件表单给隐藏掉的,当点击上传按钮的时候,触发一个函数,在函数体内在通过JQ代码触发file文件表单点击事件。

 在file文件表单上有个**onchange="updateImg()"**事件,这个函数是当file文件表单内容发生改变的时候触发。这样一来,当我们选择一个文件的时候就会触发updateImg()函数,在通过ajax上传到服务的,最终返回url链接添加到文本表单中。

# js 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×