input file 文件上传二：input file 前端

在看这篇文章前可以先看一下这一篇：https://blog.csdn.net/goblinm/article/details/80586507

样品如图：

附件：点击选择文件弹出本地文件夹

附件名称：为选择的文件重新命名存储，这是后台工作后面再说。

代码：

<div class="modal fade" id="add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">附件上传</h4>
            </div>
            <div class="modal-body">
                <form method="POST" enctype="multipart/form-data" class="form-horizontal" id="upload">


                     <div class="form-group">
                        <label for="file" class="col-sm-3 control-label">附件选择 :</label>
                        <div class="col-sm-9">
                        <input type="text" name="tex" class="form-control" id="txt_Path" onclick="$('input[id=file]').click();" placeholder="选择附件">
                        <input type="file" name="file" id="file" class="form-control" style="display: none;"/>
                        <input type="text" name="companyF" id="companyF" value="company_name"
                               style="display: none;"/>
                        <input type="text" name="coverFile" id="coverFile" value="False" style="display: none;"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">附件名称 :</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" name="name" placeholder="附件名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="desc" class="col-sm-3 control-label">附件描述 : </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="desc" name="desc" placeholder="附件描述">
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="desc" class="col-sm-3 control-label"></label>
                        <div class="col-sm-9">
                            <button type="button" class="btn btn-default" onclick="upload()" data-dismiss="modal" style="margin: auto">上传附件</button>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div

定位到form表单

<form method="POST" enctype="multipart/form-data" class="form-horizontal" id="upload"></form>

一般文件上传都用form表单提交，提交方式为post,enctype="multipart/form-data":不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。

upload()提交文件,coverFile()覆盖文件

 function upload() {
        var form = document.getElementById('upload');//获取form表单的内容
        formData = new FormData(form);//
        $.ajax({
            url: "#",
            type: "post",
            data: formData,
            processData: false,//不处理数据
            contentType: false,//不处理内容类型
            success: function (data) {
                if (data == 'ok') {
                    layer.msg("上传成功！");
                    setTimeout(function(){//延时加载页面
                        $("a[name='8']").click();},500);
                }
                else if (data == 'exists') {
                    //询问框
                    layer.confirm('已有该文件，是否覆盖？', {
                            btn: ['确定', '取消'],
                        }, //按钮
                        function () {
                            coverFile();
                            $("#add_modal").modal('hide')
                            $("a[name='8']").click()

                        },
                        function () {
                            layer.msg('取消操作成功');
                        });
                }
            }

        })
    }

    //覆盖文件的操作
    function coverFile() {
        var form = document.getElementById('upload');
        $("#coverFile").val('True');
        formData = new FormData(form);
        $.ajax({
            url: "#",
            type: "post",
            data: formData,

          processData: false,//不处理数据
          contentType: false,//不处理内容类型 

          success: function (data) {

             layer.msg('覆盖文件成功');

} }); } //正则表达式把一些字符替换，然后在页面上那个input框显示值 $('input[id=file]').change(function () { var filename = ($(this).val().replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1")); var endname = ($(this).val().replace(/.+\./, "").toLowerCase()); $('#txt_Path').val(filename + '.' + endname); })

定位到upload()和coverFile()中的formData = new FormData(form);

FormData()对象主要用于将数据编译成键值对，以便用XMLHttpRequest来发送数据，主要用于发送表单数据。

更多的FormData()请看

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

图：

嗯第二阶段到这里。。。。