asp.net多文件的上傳、預覽、下載

本文章主要用於記錄，方便以后的翻找使用！！！！

html:

     <tr>
            <th class='formTitle'>選擇文件：
                <input type="file" id="file_input" name="file_input" style="left: -9999px; position: absolute;" multiple="multiple" />
            </th>
            <td class="formValue" colspan="4" >
                <div style="text-align: center; width: 100%" id="uploadFile">
                    <input type="button" onclick="addfileclick();" id="uploadPic" value="上  傳" style="width: 80%" /></div>
            </td>
        </tr> 
        //以下是加載當前數據已經存在的文件的記錄，包括預覽，下載，刪除；XXXXX 后台查詢的類
        @if (ViewData["files"] != null)
        {
            int i = 1;
            foreach (var file in ViewData["files"] as IEnumerable<XXXXXX>)
            {
            <tr id="[e-mail]">
                <th class="formTitle">已傳文件：</th>
                <td class="formValue" colspan="2">
                    <label id="fileName">@file.FileName</label>
                </td>
                <td class="formValue" colspan="2">
                    <div style="text-align: center;">
                        @*<a href="../@file.FilePath" id="preFile" target="_blank">預覽</a>&nbsp;&nbsp;&nbsp;*@
                        <a href="javascript:;" id="preFile" title="/@file.FilePath" name="@file.FileName" onclick="preFile(this.title,this.name,'@file.Ext')">預覽</a>&nbsp;&nbsp;&nbsp;
                                <a href="javascript:;" id="downFile" title="../@file.FilePath" name="@file.FileName" onclick="downFile(this.title,this.name)">下載</a>&nbsp;&nbsp;&nbsp;
                                <a href="javascript:;" id="@file.Id" onclick="deleteFile(this.id)">刪除</a>&nbsp;&nbsp;&nbsp;
                    </div>
                </td>
            </tr>
                         i++;
                     }
                 }

頁面加載時，為input添加change事件：

$(function () {
        var input = document.getElementById("file_input");
        if (typeof FileReader === 'undefined') {
            alert("抱歉，你的瀏覽器不支持 FileReader");
            input.setAttribute('disabled', 'disabled');
        } else {
            input.addEventListener('change', uploadFile, false);
        }
    });

后台需要獲取文件，進行頁面文件的初始加載：

public ActionResult Form(string KeyValue)
        {
            if (!string.IsNullOrEmpty(KeyValue))//編輯
            {
                var files = GetFiles(KeyValue);
                if (files.Count > 0)
                {
                    ViewData["files"] = files;
                }
            }

            return View();
        }
        public List<XXXXXX> GetFiles(string Id)
        {
            return OperateContext.Current.BllContext.IXXXXXXBll.GetList(c => c.Id== Id && c.XX== "XX").ToList();
        }

然后就是頁面上的js來處理了：

//點擊上傳按鈕進行文件的選擇
function addfileclick() {
        document.getElementById("file_input").click();
    }
    var num = 0;//最終上傳的文件的數量
    var index = 0;//選擇的文件的"索引"
    var deleteIndex = "";//js中也就是前端進行並未上傳到后台的文件的刪除
   
    function uploadFile() {
        num = 0;
        index = 0;
        deleteIndex = "";
        $(".newFileClass").remove();
        var iLen = this.files.length;//選擇的文件的數量
        for (var i = 0; i < iLen; i++) {//循環選擇文件進行展示，並添加刪除按鈕，可以進行刪除
            var html = "<tr id='newFile_" + index + "' class='newFileClass'><th class='formTitle'>文件名：</th><td class='formValue' colspan='2'><label id='fileName'>" + this.files[i].name + "</label></td><td class='formValue'  colspan='2'><div style='text-align:center;'><a href='javascript:;' id='deleteFile' onclick = 'deleteFile(" + index + ");'>刪除</a></div></td></tr>";
            $("#FileTable").append(html);
            index++;
            num++;
        }

    }
    //刪除文件--后台刪除文件，已經在后台保存過的文件的刪除
    function deleteFile(index) {
        if (!!GetQuery('KeyValue') && !checkRate(index)) {//編輯
            if (!confirm("注：您確定要刪除上傳記錄？"))
            { return false; }
            var fileId = index;
            AjaxJson(getControlStr() + "/User_DiseaseDiagnose/DeleteFile", { KeyValue: GetQuery('KeyValue'), fileId: fileId }, function (Data) {
                layer.msg(Data.Message, {
                    icon: Data.State,
                    time: 1500
                }, function () {
                    if (Data.State == 1) {
                        //window.location.reload();
                    }
                    else {
                        $("#oldFile_" + index).remove();
                    }
                    layer.closeAll();
                });
            });
        }
        else {//新增
            num--;
            //fd.delete(index);
            $("#newFile_" + index).remove();
            deleteIndex += (index + ",");
        }
    }
//正則表達式 驗證數據
    function checkRate(value) {
        var re = /^[0-9]+[0-9]*]*$/; //判斷正整數 /^[1-9]+[0-9]*]*$/         
        if (!re.test(value)) {
            return false;
        } else {
            return true;
        }
    }
    //預覽文件，其中FleView為一個頁面，用來顯示文件內容，FilePath為文件的保存路徑；ext用來區分不同文件類型，按照不同方式顯示
    function preFile(path, name, ext) {
        parentDialogWithClose(getControlStr() + "/ControllerName/FileView?FilePath=" + escape(path) + "&ext=" + ext, '', name, "100%", "100%");
    }
    //下載文件，通過創建a標簽實現點擊下載
    function downFile(path, name) {
        var alink = document.createElement("a");
        alink.href = path;
        alink.download = name;
        alink.click();
    }
//layer.open打開彈窗，在彈窗中顯示文件。其中parent.parent.可以根絕實際情況修改
    function parentDialogWithClose(url, _id, _title, _width, _height) {
        if (_width != "100%") {
            _width = _width + "px";
            _height = _height + "px";
        }
        parent.parent.layer.open({
            type: 2,
            title: _title,
            shadeClose: true,
            shade: 0.01,
            scrollbar: false,
            maxmin: true, //開啟最大化最小化按鈕
            area: [_width, _height],
            content: url
        });
    }

其中的FileView頁面內容：本頁面主要用來區分word文檔與其他文件的展示。

@{
    ViewBag.Title = "FileView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    $(function () {
        var FilePath = (GetQuery('FilePath'));
        var ext = GetQuery("ext");
        if (!!ext) {
            debugger;
            if (ext == '.doc' || ext == '.docx') {
                $("#myIframe").attr("src", "https://view.officeapps.live.com/op/view.aspx?src=" + window.location.host + getControlStr() + FilePath);
            }
            else if (ext == '.jpg' || ext == '.jpeg' || ext == '.png' || ext == '.bmp' || ext == '.gif') {
                var html = "<img src='" + getControlStr() + FilePath + "' style='margin:0 auto;min-width:400px;display:block;'>";
                $("#myIframe").contents().find("body").append(html)
            }
            else {
                $("#myIframe").attr("src", getControlStr() + FilePath);
            }
        }

        
        
    });
</script>

<body style="height:100%;">
    <iframe id="myIframe" src='' frameborder='1' style="text-align:center; width:100%; height:100%;"></iframe>
</body>

 

記錄下來，方便以后使用時查找。