Ejemplos de funciones de carga y descarga de archivos adjuntos .net

Actualizando archivos:

Si se muestra el efecto:

Después de seleccionar un archivo en la computadora, el efecto de visualización es el siguiente:

Puede eliminar los archivos adjuntos cargados o puede continuar subiendo los archivos adjuntos. La lógica específica es la siguiente:

El front-end recibe la información del archivo seleccionada por el usuario y luego la transmite al back-end, y el back-end guarda el archivo en el directorio especificado en el servidor.

Código HTML de front-end:

 <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> 

Código js de front-end: 

//附件上传
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);
        }
    })
}

Código de backend:

 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();
            }
        }

    }

 

Estructura de la tabla de la base de datos (Oracle):

 

Lógica de backend: guarde el archivo adjunto entregado por el front-end en el directorio especificado del servidor y luego guarde la información del adjunto (ruta del adjunto, nombre del adjunto, etc.) en la tabla de adjuntos de la base de datos. El campo adjunto de la empresa La tabla solo necesita el archivo en la ID de la tabla adjunta.

 

Comparación de los elementos DOM de la página antes y después de la carga del archivo adjunto:

 

Eliminación de adjuntos:

Código js de front-end:

//删除附件
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);
}

La función del código anterior es eliminar el elemento de la página, luego eliminar el ID del adjunto correspondiente del campo oculto y actualizar el valor del campo adjunto en el registro de la base de datos cuando la página envía los datos.

 

Carga de archivos adjuntos:

Por ejemplo, al ver la página, debe cargar los archivos adjuntos cargados y puede descargarlos. El efecto de la página es como se muestra en la figura:

Haga clic en el nombre del archivo adjunto para descargar o abrir el archivo adjunto correspondiente.

Código de front-end:

//加载附件
//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);
            }
        });
    }
}

 

El código anterior solo se usa como ejemplo de referencia. Si desea usarlo, debe cambiarlo de acuerdo con la situación real. El código de fondo está escrito en un marco personalizado y es solo para referencia.