在看这篇文章前可以先看一下这一篇: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
图:
嗯第二阶段到这里。。。。