.net添付ファイルのアップロードおよびダウンロード機能の例

その他 2021-03-01 02:14:35 訪問数: null

ファイルの更新：

効果が示された場合：

コンピューターでファイルを選択すると、表示効果は次のようになります。

アップロードした添付ファイルを削除することも、引き続き添付ファイルをアップロードすることもできます。具体的なロジックは次のとおりです。

フロントエンドは、ユーザーが選択したファイル情報を受信して​​バックエンドに送信し、バックエンドはファイルをサーバー上の指定されたディレクトリに保存します。

フロントエンド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);
            }
        });
    }
}

 

上記のコードは参考例としてのみ使用しています。使用する場合は、実際の状況に応じて変更する必要があります。背景コードはカスタムフレームで記述されており、参照用です。

 

おすすめ

転載: blog.csdn.net/liangmengbk/article/details/114220110
おすすめ
ランキング
SLAM 14 講義 - ch3 演習
bootstrap4在庫スタイルリスト（見つけるために）
件名インターネット
スレッドのタイムアウト
LinuxのLinuxのコマンド必見マスター初心者注3。
コンピュータネットワークのネットワークアプリケーションの00 05基本原則
「10の花」
Classic topic: the maximum value of the sliding window + the first K high-frequency elements
fastjson の脆弱性のさまざまなバージョンのペイロード テスト
PythonクローラーBaidu広告フィルタリングシステム
アーカイブ
もっと
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)
2024-04-16(23)

コードワールド

© 2018 codetd.com