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 });
            }        
  • 相关阅读:
    js-封装几个常用函数
    js获取地址栏的几种方法
    vue 子组件传值给父组件,兄弟组件传参以及实现动态组件
    实现同一个组件页面通过不同的tab标签页打开
    echarts柱状图一组数不同柱子的颜色修改
    echarts实现环形图
    vue 中JSONPath的使用方法之一
    vue element-ui 左侧菜单栏 el-menu属性实现动态菜单
    vue 前端服务器代理,proxyTable简要叙述
    分享一篇IBN(Intent-based networking)调研报告
  • 原文地址:https://www.cnblogs.com/cylblogs/p/9365924.html
Copyright © 2011-2022 走看看