YNICTE/BO/Views/Shared/Partial/FileScript.cshtml

<style type="text/css">
    .file_search_area {width: 100%;}
    .file_input_textbox {cursor: pointer;border: 1px solid #ddd;height: 22px;}
    .file_input_opacity {display: none;}
    .w100p, input[type=text].w100p {width: 100%;}
    .w90p, input[type=text].w90p {width: 90%;}
    .fileitembox {padding: 5px 10px;}
    .file_search_area {position: relative;display: inline-block;height: 28px;}
    input[type=text].file_input_textbox {width: 50% !important;vertical-align: top;}
    a.btn_file_search {display: inline-block;box-sizing: border-box;padding-top: 4px;background: #999;width: 120px;height: 22px;text-align: center;color: #fff !important;vertical-align: top;margin-left: 3px;transition: all .2s;}
        a.btn_file_search:link {color: #fff !important;}
        a.btn_file_search:visited {color: #fff !important;}
    .file_input_opacity {position: absolute;left: 0;top: 0;width: 560px;cursor: pointer;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity: 0;}
    .file_search_area .btn_add {margin-left: 8px;height: 28px;}
    a.btn_file_clear {display: inline-block;}
</style>
<script type="text/javascript">
    var _filecontrol;
    var _filesize = 104857600;
    var _filemax = "100 Mega ";
    $(document).ready(function () {
        $("body").first().append("<form id=\"frmFile\" method=\"POST\"></form>");
        $("body").on("click", "input.file_input_textbox, a.btn_file_search", function () {
            $(this).parent().find("input.file_input_opacity").trigger("click");
        }).on("click", "a.btn_file_clear", function () {
            $(this).closest(".file_search_area").find(".clearfiletemp").val("");
            if (($(this).closest(".fgbox").attr("data-imageid") || "") != "") {
                var dimg = ($(this).closest(".fgbox").attr("data-dftsrc") || "") == "" ? "/Content/images/common/thum_noimage.gif" : $(this).closest(".fgbox").attr("data-dftsrc");
                $("#" + $(this).closest(".fgbox").attr("data-imageid")).attr("src", dimg);
            }
        }).on("change", "input.file_input_opacity", function (e) {
            $(this).parent().find("input.file_input_textbox").val($(this).val());
            var fbox = $(this).closest("div.fgbox");
            if ($(this).val() != "") {
                //$(this).parent().find("input.file_input_textbox").val($(this).val());
                _filecontrol = $(this);
                var fname = $(this).val().toUpperCase();
                var fext = fname.split('.')[fname.split('.').length - 1];
                var bytes = $(this)[0].files.length > 0 ? $(this)[0].files[0].size : 0;
                if (fbox.attr("data-isimage") == "1" && fext != "JPG" && fext != "GIF" && fext != "PNG") {
                    $(this).val("");
                    $(this).parent().find("input.file_input_textbox").val("");
                    msg("이미지만 첨부해주세요.", 1);
                }
                else if (",XLSX,XLS,HWP,PDF,ZIP,JPG,GIF,PNG,TXT,PPTX,PPT,DOC,DOCX,PSD,MP4,MP3.WMV,MP4,ZIP".indexOf("," + fext + ",") < 0) {
                    $(this).val("");
                    $(this).parent().find("input.file_input_textbox").val("");
                    msg("허용된 파일유형이 아닙니다.", 1);
                }
                else if ((fbox.attr("data-ext") || "") != "" && ("," + (fbox.attr("data-ext") || "") + ",").toLowerCase().indexOf("," + fext.toLowerCase() + ",") < 0) {
                    $(this).val("");
                    $(this).parent().find("input.file_input_textbox").val("");
                    msg("허용된 파일유형이 아닙니다.");
                }
                else if (bytes > (_filesize || 104857600)) {
                    msg('파일크기는 ' + (_filemax || "100 Mega ") + "입니다.", 1);
                    $(this).val("");
                    $(this).parent().find("input.file_input_textbox").val("");
                }
            }
            if ($(this).closest(".fgbox").attr("data-imageid") != "") {
                if ($(this).val() == "") {
                    var dimg = ($(this).closest(".fgbox").attr("data-dftsrc") || "") == "" ? "/Content/images/common/thum_noimage.gif" : $(this).closest(".fgbox").attr("data-dftsrc");
                    $("#" + $(this).closest(".fgbox").attr("data-imageid")).attr("src", dimg);
                }
                else {
                    var files = e.target.files;
                    var filesArr = Array.prototype.slice.call(files);
                    var fitem = $(this);
                    filesArr.forEach(function (f) {
                        if (!f.type.match("image.*")) {
                            //alert("Not Image File.");
                            return;
                        }
                        sel_file = f;
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $("#" + $(fitem).closest(".fgbox").attr("data-imageid")).attr("src", e.target.result);
                        }
                        reader.readAsDataURL(f);
                    });
                    $("#" + $(this).closest(".fgbox").attr("data-imageid")).show();
                }
            }
            $(this).attr("data-empty", 1);
            if ($(this).val() != "") {
                $(this).attr("data-empty", 0);
            }
            _fbox = fbox;
            resetFile();
        });
    });
    var _deletea;
    var _fndelisjs2 = false;
    function fnFileDeleteNew(id, a, log, isjs2, cb) {
        log = log || "";
        _fndelisjs2 = isjs2 || false;
        _deletea = a;
        if (confirm('삭제 하시겠습니까?')) {
            _fbox = $(a).closest("div.fgbox");
            capp('/aCommon/DeleteFile', { key: id, log: log }, cb || "cbdelfilenew", null, null, null, isjs2);
            //var data = new FormData();
            //data.append('fno', id);
            //apostf('/Common/FileDeleteNew', data, 'cbdelfilenew');
            //$(".frmFileElement").remove();
            //$("#frmFile").append("<input type=\"hidden\" name=\"fno\" value=\"" + id + "\" />");
            //apost('/Common/FileDeleteNew', 'frmFile', 'cbdelfilenew');
        }
    }
    function cbdelfilenew() {
        if (capResult.code == 1000) {
            if (($(_deletea).closest(".fgbox").attr("data-imageid") || "") != "") {
                $("#" + $(_deletea).closest(".fgbox").attr("data-imageid")).attr("src", "/img/common/profile_sample.jpg");
            }
            if (_fbox.attr("data-hidemode") == "1") {
                _fbox.find(".file_search_area").show();
            }
            $(_deletea).closest(".fileitembox").remove();
            resetFile();
            if (_fndelisjs2) {
                msg2("삭제되었습니다.", 1);
            } else {
                msg("삭제되었습니다.", 1);
            }
        }
        else {
            msg("삭제할 권한이 없습니다.", 1);
        }
    }
    var _fbox;
    function resetFile() {
        if (getint(_fbox.attr("data-filecount")) > _fbox.find("input[type=file]").length + $(_fbox).find("a.btn_txt").length && _fbox.find("input[data-empty='1']").length < 1) {
            _fbox.append("<div class=\"file_search_area\"><a href=\"#\" class=\"btn_file_search\">첨부파일 찾기</a><input type=\"text\" class=\"file_input_textbox clearfiletemp\" readonly=\"\" style=\"width: " + _fbox.attr("data-width") + ";\" /><input type=\"file\" class=\"file_input_opacity clearfiletemp\" name=\"" + _fbox.attr("data-fname") + "\" data-empty=\"1\" /><a href=\"#\" class=\"btn_file_clear\" style=\"border: 1px solid #ddd; padding: 3px 10px; background-color: #999; color: #fff !important;\">삭제</a></div>");
        }
        else if (_fbox.find("input[type=file][data-empty='1']").length > 0) {
            $.each(_fbox.find("input[type=file][data-empty='1']"), function (i, e) {
                $(this).closest("div.file_search_area").remove();
            });
            _fbox.append("<div class=\"file_search_area\"><a href=\"#\" class=\"btn_file_search\">첨부파일 찾기</a><input type=\"text\" class=\"file_input_textbox clearfiletemp\" readonly=\"\" style=\"width: " + _fbox.attr("data-width") + ";\" /><input type=\"file\" class=\"file_input_opacity clearfiletemp\" name=\"" + _fbox.attr("data-fname") + "\" data-empty=\"1\"  /><a href=\"#\" class=\"btn_file_clear\" style=\"border: 1px solid #ddd; padding: 3px 10px; background-color: #999; color: #fff !important;\">삭제</a></div>");
        }
    }
</script>