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="oldFile_@file.Id">
                <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>

 

记录下来，方便以后使用时查找。