附件上传:
效果如果所示:
选择一个电脑上的文件后,显示效果如图:
可以删除已上传的附件,也可以继续上传附件。具体逻辑如下:
前端对用户选择的文件信息进行接收,然后传递到后台,后台将文件保存到服务器上指定的目录里面。
前端HTML代码:
<div class="form-group col-xs-6 modal-form" id="div_AUDIT_ATTACHMENT">
<label class="col-xs-5 control-label">装修审核相关附件</label>
<input type="hidden" name="AUDIT_ATTACHMENT" id="id_AUDIT_ATTACHMENT" class="fld_senlan file_mark" value="" />
<div class="col-xs-7 bxRem positionRe textDiv" id="AddFile_AUDIT_ATTACHMENT">
<input type="file" id="file_AUDIT_ATTACHMENT" name="AUDIT_ATTACHMENT" class="form-control length_valid input-md Mroad" multiple="multiple" onchange="onc('AUDIT_ATTACHMENT')" />
<p class="help-block" id="p_AUDIT_ATTACHMENT"></p>
<div class="bxRem ZfileList" id="Add_FileView"></div>
</div>
</div>
前端js代码:
//附件上传
function onc(fieldname) {
var pd = 0;
var files = document.getElementById("file_" + fieldname).files;//当前选择附件信息
for (var i = 0; i < files.length; i++) {
$("#Add_FileView").find('a').each(function () {
var aFile = $(this).children("span")[0].innerText;
if (files[i].name == aFile) {
alert("请勿上传相同文件");
pd = 1;
}
})
var re = /[`~!@#$%^&*_+=<>{}\/'[\]]/im;
if (re.test(files[i].name)) {
alert("文件名中不允许存在 `~!@#$%^&*_+=<>{}\/'[] 等特殊字符");
pd = 1;
}
}
if (pd == 1) {
$('#file_' + fieldname).val('');
return false;
}
var maxSize = 15 * 1024 * 1024;
var formData = new FormData();
var loggerString = "";
for (var i = 0; i < files.length; i++) {
var $name = files[i].name;
var file = files[i].size;
if (!/.(gif|jpg|jpeg|png|pdf|bmp|xls|xlsx|doc|docx|txt|rar|zip|arj|z|cab|lzh|ace|tar|gz|uue|bz2|jar|iso)$/.test($name.toLowerCase())) {
alert("上传的文件格式不正确,请重新上传!");
$('#file_' + fieldname).val('');
return;
}
if (file > maxSize) {
alert('上传的文件大小不能超过15M,请重新上传!');
$('#file_' + fieldname).val('');
return;
}
formData.append('file' + i, files[i]);
loggerString += ("file" + i + ":" + files[i].name + ",");
}
$.ajax({
url: "AssetManage_UploadFiles.aspx",
data: formData,
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
type: "post",
success: function (data) {
var strFileA = "";
if (data && data.length > 0) {
var fileId = $('#id_' + fieldname).val();
for (var i = 0; i < data.length; i++) {
strFileA += "<div id=\"btn_File" + data[i].fileId + "\"><a href='." + data[i].filePath + "' target=\"_Blank\" fid='" + data[i].fileId + "' value='" + data[i].fileName + "' title='" + data[i].fileName + "' title='" + data[i].fileName + "'><span>" + data[i].fileName + "</span></a>";
strFileA += "<input type=\"button\" value=\"删除\" onclick=\"Del_File('" + data[i].fileId + "','" + fieldname + "')\"></div>";
if (fileId != "" && fileId != undefined) {
fileId = fileId + "," + data[i].fileId;
}
else {
fileId = data[i].fileId;
}
}
$('#id_' + fieldname).val(fileId);
}
$('#file_' + fieldname).val('');
$('#file_' + fieldname).siblings('#Add_FileView').append(strFileA);
//$("#Add_FileView").append(strFileA);
}
})
}
后端代码:
public class AssetsFileSave : WebPageBase4json
{
private static readonly ILog logger = LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
private string path;
string id = "";
protected override string getReturnJson(HttpContext context, List<OptReturnData> lobj)
{
string filePath = "/UpFile/XDCYASCHD/";
string json = "";
try
{
HttpFileCollection files = context.Request.Files;
if (files.Count > 0)
{
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string stamp = DateTime.Now.ToString("yyyyMMddhhmmss");
string date = DateTime.Now.ToString("yyyyMMdd");
string Folder = "~/UpFile/XDCYASCHD/" + date;
filePath += date;
//如果不存在就创建file文件夹
if (!Directory.Exists(HttpContext.Current.Server.MapPath(Folder)))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath(Folder));
}
string tempfileName = file.FileName.Substring(file.FileName.LastIndexOf("\\") + 1);
//存储到本地路径
path = Folder + "/" + stamp + tempfileName;
string newFileName = stamp + tempfileName;
filePath += ("/" + stamp + tempfileName);
string savepath = HttpContext.Current.Server.MapPath(path);
file.SaveAs(savepath);
logger.Debug("上传成功,路径:" + HttpContext.Current.Server.MapPath(path));
filePath = "/UpFile/XDCYASCHD/" + date + "/" + newFileName;
InserNoticeFile(filePath, tempfileName, context.Session["Acount"].ToString(), newFileName);
json += "{\"fileId\":\"" + id + "\",\"filePath\":\"" + filePath + "\",\"fileName\":\"" + tempfileName + "\"},";
}
}
else
{
new Exception("无法获取上传文件");
}
}
catch (Exception ex)
{
logger.Error("异常描述:\t" + ex.Message);
logger.Error("异常方法:\t" + ex.TargetSite);
logger.Error("异常堆栈:\t" + ex.StackTrace);
}
json = "[" + json.TrimEnd(',') + "]";
return json;
}
private void InserNoticeFile(string FILEPATH, string FILENAME, string CREATE_USER, string fonname)
{
using (OracleConnection conn = new OracleConnection(DefaultDBConnection))
{
conn.Open();//打开连接
//获取文件ID
string sql = "select SEQ_T_DUP_DATAFILE.nextval id from dual";
OracleCommand cmd = new OracleCommand(sql, conn);
OracleDataAdapter ada = new OracleDataAdapter(cmd);
DataSet ds = new DataSet();
ada.Fill(ds);
id = ds.Tables[0].Rows[0]["ID"].ToString();
string SQL = @"insert into T_DUP_DATAFILE(FID, FPATH, FNAME, CREATE_USER, CREATE_DATE, FONNAME) values(:FID,:FPATH,:FNAME,:CREATE_USER,sysdate,:FONNAME)";
cmd = new OracleCommand(SQL, conn);
cmd.Parameters.Add("FID", id);
cmd.Parameters.Add("FPATH", FILEPATH);
cmd.Parameters.Add("FNAME", FILENAME);
cmd.Parameters.Add("CREATE_USER", CREATE_USER);
cmd.Parameters.Add("FONNAME", fonname);
int i = cmd.ExecuteNonQuery();
conn.Close();
}
}
}
数据库表结构(oracle):
后台的逻辑:将前端传递的附件文件保存到服务器指定目录中,然后将附件信息(附件所在路径、附件名称等)保存在数据库的附件表中,业务表的附件字段只需要文件在附件表的ID即可。
附件上传前后,页面DOM元素对比:
附件删除:
前端js代码:
//删除附件
function Del_File(obj, fieldname) {
var id = 'btn_File' + obj;
var jd = document.getElementById(id);
jd.parentNode.removeChild(jd);
var fileValue = $('#id_' + fieldname).val();
if ((fileValue.search(',') == -1 || fileValue.search(obj + ',') == -1) && (fileValue.search(obj) != -1)) {
if (fileValue.search(obj + ',') == -1 && fileValue.search(',' + obj) != -1) {
fileValue = fileValue.replace(',' + obj, '');
}
else {
fileValue = fileValue.replace(obj, '');
}
}
else {
fileValue = fileValue.replace(obj + ',', '');
}
$('#id_' + fieldname).val(fileValue);
}
上面代码的功能就是把元素从页面移除,然后把对应附件的ID从隐藏域中删除,当页面提交数据时更新数据库记录中的附件字段值。
附件的加载:
比如在查看页面,需要把上传的附件加载出来,可以下载,页面效果如图:
点击附件的名称就可以下载或打开对应的附件。
前端代码:
//加载附件
//fldname 附件字段名称
//fileid 附件id
function loadFile(fldname, fileid) {
if (fldname != undefined && fldname != null && fldname != '' && fileid != undefined && fileid != null && fileid != '') {
$.ajax({
url: "AssetManage_GetFileInfo.aspx",
data: { FID: fileid },
async: false,
type: "post",
success: function (data) {
var filelist = data[0].OptRetData.Table;
var strFileA = "";
if (filelist && filelist.length > 0) {
for (var i = 0; i < filelist.length; i++) {
strFileA += "<div id=\"btn_File" + filelist[i].FID + "\"><a href='." + filelist[i].FPATH + "' target=\"_Blank\" fid='" + filelist[i].FID + "' value='" + filelist[i].FNAME + "' title='" + filelist[i].FNAME + "'><span>" + filelist[i].FNAME + "</span></a></div>";
}
}
$("#AddFile_" + fldname + " #Add_FileView").append(strFileA);
}
});
}
}
以上代码只是作为参考实例,如果要使用需要根据实际情况进行更改,后台代码是写在自定义的框架中,只作为参考。