zoukankan      html  css  js  c++  java
  • MVC 上传 下载

    【上传】带进度条

    view 

    注:添加easyui的js文件

    <script type="text/javascript">
    function fileSelected() {
    var file = document.getElementById('fileToUpload').files[0];
    var fileName = file.name;
    var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);

    if (file_typename == '.doc' || file_typename == '.docx') {//这里限定上传文件文件类型
    if (file) {

    $("#uploadFile").show();
    var fileSize = 0;
    if (file.size > 1024 * 1024)
    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    else
    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
    document.getElementById('fileSize').innerHTML = '大小: ' + fileSize;
    document.getElementById('fileType').innerHTML = '类型: ' + file.type;
    }
    }
    else {
    $("#uploadFile").hide();
    document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.doc后缀而不应该是" + file_typename + ",请重新选择文件</span>"
    document.getElementById('fileSize').innerHTML = "";
    document.getElementById('fileType').innerHTML = "";

    }
    }

    function uploadFile() {
    var fd = new FormData();
    fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
    var XMLHttp = null;
    if (window.XMLHttpRequest) { //测试 window.XMLHttpRequest 对象是否可用
    var xhr = new XMLHttpRequest(); //创建一个新对象
    xhr.upload.addEventListener("progress", uploadProgress, false);
    //监听事件
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "/Manage/Upload");
    xhr.send(fd);
    } else if (window.ActiveXObject) {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

    xhr.upload.addEventListener("progress", uploadProgress, false);

    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "/Manage/Upload");
    xhr.send(fd);
    }
    }

    //上传进度
    function uploadProgress(evt) {
    if (evt.lengthComputable) {
    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
    $('#progressNumber').progressbar('setValue', percentComplete);
    }
    else {
    document.getElementById('progressNumber').innerHTML = '无法计算';
    }
    }

    //上传成功响应
    function uploadComplete(evt) {
    var message = evt.target.responseText;
    alert(message);
    }

    //上传失败
    function uploadFailed(evt) {
    alert("上传出错");
    }

    //取消上传
    function uploadCanceled(evt) {
    alert("上传已由用户或浏览器取消删除连接");
    }
    </script>

    @using (Html.BeginForm())
    {
    @Html.ValidationSummary(true)
    <div>
    <div class="row" style="padding: 10px">
    <div>
    论文题目:
    <input class="easyui-validatebox easyui-textbox" data-options="required:true" name="Re_Title"
    id="Re_Title" style=" 250px" />
    </div>
    <label for="file">
    论文内容:
    </label>
    <input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();" />
    <a id="uploadFile" style="display: none" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"
    onclick="uploadFile()">上传</a>
    </div>
    <div id="fileName" style="padding: 10px">
    </div>
    <div id="fileSize" style="padding: 10px">
    </div>
    <div id="fileType" style="padding: 10px">
    </div>
    <div id="progressNumber" class="easyui-progressbar" style=" 400px; float: left;
    margin-left: 10px;">
    </div>
    <div style="padding: 95px">
    <input id="submit" type="submit" value="保存" class="bottom" />
    <input id="reset" type="reset" value="取消" class="bottom" />
    </div>
    </div>
    }

    控制器 Controller.cs

    /// <summary>
    /// 上传文件
    /// </summary>
    /// <param name="fileToUpload"></param>
    /// <returns></returns>
    [HttpPost]
    [ValidateInput(false)]
    public string Upload(HttpPostedFileBase[] fileToUpload)
    {
    try
    {
    string FileUrl = string.Empty;
    foreach (HttpPostedFileBase file in fileToUpload)
    {
    string path = System.IO.Path.Combine(Server.MapPath("~/FileUpLoad/Reviews"), System.IO.Path.GetFileName(file.FileName));
    file.SaveAs(path);
    FileUrl = path;
    }
    Session["URL"] = FileUrl;
    return "上传成功";
    }
    catch
    {
    return "上传失败";
    }

    }

    【下载】

    view 

    <a href="/Manage/DownFile?filePath=@Model.Re_Content&fileName=@Model.Re_Title">@Model.Re_Title</a>

    controller.cs

    #region ReviewDownFile
    //本地路径转换成URL相对路径
    private string urlconvertor(string imagesurl1)
    {
    string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//获取程序根目录
    string imagesurl2 = imagesurl1.Replace(tmpRootDir, ""); //转换成相对路径
    imagesurl2 = imagesurl2.Replace(@"", @"/");
    return imagesurl2;
    }

    //下载方法
    [HttpGet]
    public FileStreamResult DownFile(string filePath, string fileName)
    {
    var url = filePath;
    var newurl = urlconvertor(url);
    string absoluFilePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["AttachmentPath"] + newurl);
    absoluFilePath = absoluFilePath.Replace("\Manage", "");
    return File(new FileStream(absoluFilePath, FileMode.Open), "application/octet-stream", Server.UrlEncode(fileName));
    }
    #endregion

    有些事可以渐渐改变,有些事却容不得我们慢慢调整,想一想,有那些事是必须立即面对和努力克服的,用坚定的态度去处理吧!快刀斩乱麻,绝不容许坏习惯继续腐蚀我们的心灵!
  • 相关阅读:
    常用工具篇(二)死链接扫描工具–Xenu
    基于python的性能测试工具–locust
    AppServ 8.0 的php 5.6 切换到 php7.0 方法
    toString()和toLocaleString() 的区别
    解决Nginx无法重启问题
    解决 AppServ8.0 安装好之后数据库登陆不上的问题
    TCP/IP 协议
    pc端登陆多个微信
    阿里云服务器创建宝塔面板教程
    轻松免费将你的家庭版windows10升级到windows10专业版
  • 原文地址:https://www.cnblogs.com/syzx/p/4517466.html
Copyright © 2011-2022 走看看