zoukankan      html  css  js  c++  java
  • vue (不用el-upload) 原生html 上传upload Excel

    <template>
      <el-dialog title="Import Excel" :before-close="onClickCancelHandler" :visible="visible">
        <form id="postForm" enctype="multipart/form-data" method="post">
          <label for="fileinp" class="btnClass">
              <input type="button" id="btn" multiple draggable="true" value="Click upload"><span id="text">Please upload excel files</span>
              <input type="file" id="fileinp" @change="setText">
              <i class="el-icon-upload"></i>
              <div class="el-upload__tip" slot="tip">You can only upload Excel files, and not more than 10M</div>
          </label>
          <div class="btnClass">
          <el-button @click="upload" type="primary" id='btnUpload'>upload</el-button>
          <el-button @click="onClickCancelHandler" type="primary">cancel</el-button>
          </div>
        </form>
      </el-dialog>
    </template>
    <script>
    export default {
      data() {
        return {
          avatar: "aaaa",
    
          visible: true
        };
      },
    
      methods: {
        onClickCancelHandler() {
          this.$emit("closeUploadDailog");
        },
        setText(){
          $("#text").html($("#fileinp").val());
        },
    
        async upload(){
          const  url="/CApi/Upload/UploadFiles";
          var input = document.querySelector('input[type="file"]')
    
          var data = new FormData()
          for (const file of input.files) {
            data.append('files',file,file.name)
            console.log('file',file)
          }
    
          let res = await this.selm_fetch(url, {
            method: "POST",
            credentials: "include",
            // headers: {
            //   "Content-Type": "multipart/form-data"
            // },
            body:data
          });
    
          let resJson = await res.json();
        }
      }
    };
    </script>
    <style>
    label {
      position: relative;
    }
    #fileinp {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
    #btn {
      margin-right: 5px;
    }
    #text {
      color: red;
    }
    #btn {
      padding: 5px 10px;
      background: #00b0f0;
      color: #fff;
      border: none;
      border-radius: 5px;
    }
    .btnClass{
      margin-bottom: 100px;
      margin-top: 500px;
    }
    </style>
    public ActionResult UploadFiles()
            {
                var result =  false ;
                var fname = String.Empty;
                if (Request.Files != null && Request.Files.Count > 0)
                {
                    //foreach(HttpPostedFileBase f in Request.Files)
                    //{
                    //    fname = $"/uploads/{DateTime.Now.Ticks}${f.FileName}";
                    //    f.SaveAs(Server.MapPath($"~{fname}"));
                    //}用foreach被坑 取到的是字符串 filename
                    var file = Request.Files[0];
    
                    if (file != null && file.ContentLength > 0)
                    {
                        var fileName = Path.GetFileName(file.FileName);
                        var path = Path.Combine(Server.MapPath("~/uploads/"), fileName);
                        file.SaveAs(path);
                    }
                    result = true;
                }
                return Json(new ApiResult{action= result , data= fname });
            }        
  • 相关阅读:
    VScode 修改中文字体
    missing KW_END at ')' near '<EOF>'
    SQL inner join, join, left join, right join, full outer join
    SQL字符替换函数translater, replace
    SQL COOKBOOK SQL经典实例代码 笔记第一章代码
    sqlcook sql经典实例 emp dept 创建语句
    dateutil 2.5.0 is the minimum required version python
    安装postgresql后找不到服务 postgresql service
    Postgres psql: 致命错误: 角色 "postgres" 不存在
    【西北师大-2108Java】第十六次作业成绩汇总
  • 原文地址:https://www.cnblogs.com/cylblogs/p/9365924.html
Copyright © 2011-2022 走看看