//样式

<li>
<label>已有文档：</label>
<div id="fileEdit"></div>
</li>
<li>
<label>附件：</label>
<input name="file" type="file" multiple="multiple" style="display: inline-block;"/><span id="spanContent" class="pull-right" style="color: royalblue;"></span>
</li>
<li style="text-align: center">
<button class="btn btn-sm btn-success" type="submit"><i class="fa fa-upload"></i> 提交</button>
<button class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> 取消</button>
</li>

//js

function addleave() {             //onsubmit事件执行的函数；
var jsonuserinfo = $(‘#addleave‘).serializeJson();
var jsonuserinfodata = http://www.mamicode.com/$(‘#addleave‘).serialize();
var attachmentdata = http://www.mamicode.com/JSON.stringify(jsonuserinfo);
attachmentdata = http://www.mamicode.com/$.base64.encode(attachmentdata, ‘utf8‘);
var data = http://www.mamicode.com/new FormData($(‘#addleave‘)[0]);
$.ajax({
url : mainUrl+‘leave/add‘,
type : "post",
async:true,
data : new FormData($(‘#addleave‘)[0]),
contentType : "application/json;charset=utf-8",
dataType : "text",
processData: false,
contentType: false,
beforeSend: function(request) {
request.setRequestHeader("token", token);
request.setRequestHeader("attachmentdata", attachmentdata)
},
success : function show(result) {
if(result==‘success‘){
$(‘#addleave‘)[0].reset();
}else {

}

},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
return false;
}

编辑中显示的文件

function edit(){            //点击编辑按钮的函数
if(mainid == ‘‘){
popWindow(‘未选中‘)
}else {
if(fileName==‘‘||fileName==null){
$(‘#fileEdit‘).html(‘无‘)
}else{
var name = fileName.split("|");
var url = fileUrl.split("|");
var suf = fileSuf.split("|");
var op=‘‘;
for(var i=0;i<name.length;i++){
if(suf[i]==‘png‘||suf[i]==‘jpeg‘||suf[i]==‘pdf‘||suf[i]==‘tif‘||suf[i]==‘gif‘){
op+="<div style=‘width:100%‘><span style=‘display:none‘>"+i+"</span>"+name[i]+
"<a class=‘pull-right m-l‘ onclick=‘delFile(this)‘>删除</a>"+
"<a class=‘pull-right m-l‘ href=http://www.mamicode.com/‘"+mainUrl+"leave/filedown?id="+mainid+"&index="+i+"‘>下载</a>"+
"<a class=‘pull-right m-l‘ target=‘_blank‘ href=http://www.mamicode.com/‘"+fileMeeting+url[i]+"‘>预览</a>"+
"<span class=‘clearfix‘></span></div>"
}else{
op+="<div style=‘width:100%‘><span style=‘display:none‘>"+i+"</span>"+name[i]+
"<a class=‘pull-right m-l‘ onclick=‘delFile(this)‘>删除</a>"+
"<a class=‘pull-right m-l‘ href=http://www.mamicode.com/‘"+mainUrl+"leave/filedown?id="+mainid+"&index="+i+"‘>下载</a>"+
"<span class=‘clearfix‘></span></div>"
}
}
$(‘#fileEdit‘).html(op)
}
$(‘#myModal1‘).modal(‘show‘);
}
}

function delFile(org){       //点击删除执行的函数
$(org).parent().remove();
}

function doEdit(){    //编辑提交执行的函数
var ii=‘‘;
var length=$(‘#fileEdit‘).find(‘div‘).length;
for(var i=0;i<length;i++){
var t = $(‘#fileEdit‘).find(‘div‘).eq(i).find(‘span‘).html();
ii+=t+‘&‘;
}
var jsonuserinfo = $(‘#doEdit‘).serializeJson();
var jsonuserinfodata = http://www.mamicode.com/$(‘#doEdit‘).serialize();
var attachmentdata = http://www.mamicode.com/JSON.stringify(jsonuserinfo);
attachmentdata = http://www.mamicode.com/$.base64.encode(attachmentdata, ‘utf8‘);
var data = http://www.mamicode.com/new FormData($(‘#doEdit‘)[0]);
$(‘.spinnerBox‘).show();
$.ajax({
url : mainUrl+‘leave/update‘,
type: ‘POST‘,
cache: false,
data: new FormData($(‘#doEdit‘)[0]),
processData: false,
contentType: false,
dataType: ‘text‘,
beforeSend: function(request) {
request.setRequestHeader("token", token),
request.setRequestHeader("attachmentdata", attachmentdata),
request.setRequestHeader("attachmentindex", ii)
},
success : function show(result) {
if(result==‘success‘){
popWindow(‘编辑成功‘);
$(‘#myModal1‘).modal(‘hide‘);
$("#grid1").data(‘kendoGrid‘).dataSource.read();
$("#grid1").data(‘kendoGrid‘).refresh();
}else {
popWindow(‘编辑失败‘);
$(‘#myModal1‘).modal(‘hide‘);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
},
complete: function(XMLHttpRequest, textStatus){
$(‘.spinnerBox‘).hide();
}
});
return false;
}
</script>

ajax中form表单中含有文件上传功能，后台语言是java，包括图片的下载，预览，删除