Exemples de fonctions de chargement et de téléchargement de pièces jointes .net

Mise à jour des fichiers:

Si l'effet est affiché:

Après avoir sélectionné un fichier sur l'ordinateur, l'effet d'affichage est le suivant:

Vous pouvez supprimer les pièces jointes téléchargées ou vous pouvez continuer à télécharger les pièces jointes. La logique spécifique est la suivante:

Le frontal reçoit les informations de fichier sélectionnées par l'utilisateur, puis les transmet au back-end, et le back-end enregistre le fichier dans le répertoire spécifié sur le serveur.

Code HTML frontal:

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

Code js frontal: 

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

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

    }

 

Structure de la table de la base de données (oracle):

 

Logique du backend: enregistrez le fichier de pièce jointe livré par le frontal dans le répertoire spécifié du serveur, puis enregistrez les informations de la pièce jointe (chemin de la pièce jointe, nom de la pièce jointe, etc.) dans la table des pièces jointes de la base de données. Le champ pièce jointe de l'entreprise table n'a besoin que du fichier dans l'ID de la table des pièces jointes, c'est bien.

 

Comparaison des éléments DOM de page avant et après le téléchargement des pièces jointes:

 

Suppression de la pièce jointe:

Code js frontal:

//删除附件
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 fonction du code ci-dessus est de supprimer l'élément de la page, puis de supprimer l'ID de la pièce jointe correspondante du champ masqué et de mettre à jour la valeur du champ de pièce jointe dans l'enregistrement de base de données lorsque la page soumet les données.

 

Chargement des pièces jointes:

Par exemple, lors de l'affichage de la page, vous devez charger les pièces jointes téléchargées et vous pouvez les télécharger. L'effet de la page est comme illustré dans la figure:

Cliquez sur le nom de la pièce jointe pour télécharger ou ouvrir la pièce jointe correspondante.

Code frontal:

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

 

Le code ci-dessus n'est utilisé qu'à titre d'exemple de référence. Si vous souhaitez l'utiliser, vous devez le modifier en fonction de la situation réelle. Le code d'arrière-plan est écrit dans un cadre personnalisé et sert uniquement de référence.