file 的类型 input

上传你选择的文件和相关信息。
在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

就如大家所知到的可以选择文件的file类型按钮，点击按钮即可以选择文件，文件选择后旁边会显示文件名字，但是这样的原始样式比较难看，且有些时候不需要那个文件名称，所以，下面我们来详细分析一下怎样让原始样式变得更好看以及怎样获取文件信息，我们以选取图片为例。

先编写一个框架 （给框架加一个onclick="UpLode()）

<div class="form-group">
                                        <label class="col-sm-2 control-label">上传图片</label>

                                        <div class="col-sm-10">
                                            <div id="upimg" style="width: 300px; height: 200px; background-color: aquamarine; text-align: center; line-height: 200px;" onclick="UpLode()">
                                                <span><i class="glyphicon glyphicon-open"></i>上传图片</span>
                                            </div>

                                        </div>
                                    </div>

在写一个隐藏的Input   file上传按钮    加一个隐藏代码 display: none

<input id="FImg" onchange="GetFile()" type="file" style="display: none" />

点击框架会触发方法

function UpLode() {
        //触发Fil的 点击事件
        $("#FImg").trigger("click");
    }

勾选图片后点击提交后会给下面隐藏的FImg追加一个onchange事件  onchange事件是将上传的图片显示到框架内

//图片上传后onchang触发的事件
    function GetFile() {

        //2 取上传后图片的值
        //event.target.files[0]    获取指定上传控件内的第一个文件
        var a = event.target.files[0];
        //取文件的路径 注意 浏览器的保密协议
        var url = window.URL.createObjectURL(a);
        //上传图片后让图片显示到上传框
        $("#upimg").css('background', 'url(' + url + ')0% 0% / cover')
    }

 

 

 

 

注；trigger() 方法触发被选元素的指定事件类型。

 

成品演示为

 

 

然后点击卢瑟的框触发隐藏的 file  即可显示上传文件框

 

 通常这个配合 上传图片后将图片显示到上传框上的方法使用

 

上传图片后将图片显示详细链接https://www.cnblogs.com/yutang-wangweisong/p/12076510.html