UI upload多文件上传

本文介绍了一个基于ComponentArt的UIupload多文件上传组件的实现方法。该组件使用C#进行开发,并通过设置TempFileFolder和DestinationFolder路径来管理文件的临时存储与最终保存位置。此外,还配置了httpHandlers和httpModules以支持上传进度跟踪。

UI upload多文件上传

曾祥展

曾祥展

 

cs:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public class WebForm1 : System.Web.UI.Page {
    protected ComponentArt.Web.UI.Upload Upload1;

  private bool IsOnWebSite()
  {
    return Request.Url.ToString().ToLower().Contains(".componentart.com");
  }

  private void Page_Load(object sender, System.EventArgs e)
  {
    Upload1.TempFileFolder = Server.MapPath("~/uploads/temp");

    if (!IsOnWebSite())
    {
      Upload1.DestinationFolder = Server.MapPath("~/uploads");
    }
  }

    #region Web Form Designer generated code
    override protected void OnInit(EventArgs e) {
        InitializeComponent();
        base.OnInit(e);
    }
    private void InitializeComponent() {
        this.Load += new System.EventHandler(this.Page_Load);
    }
    #endregion
}

 

 

 

web.confing:

<httpHandlers>
  <add verb="*" type="ComponentArt.Web.UI.UploadProgressHandler,ComponentArt.Web.UI" path="ComponentArtUploadProgress.axd"/>
</httpHandlers>


<httpModules>
  <add type="ComponentArt.Web.UI.UploadModule,ComponentArt.Web.UI" name="ComponentArtUploadModule"/>
</httpModules>
Element-UIUpload组件主要用于处理文件上传,包括图片、文本等常见格式。如果你想要手动上传Excel文件,你可以按照以下步骤操作: 1. 首先,你需要安装Element-UI以及相关的文件上传插件,如`axios`用于发送HTTP请求,因为`element-upload`本身并不直接支持上传Excel文件。 ```bash npm install element-ui axios ``` 2. 在Vue项目中引入Element-UIUpload组件: ```html <template> <el-upload :action="uploadUrl" :on-change="handleChange" :file-list="fileList" accept=".xls,.xlsx" <!-- 表示接受.xls和.xlsx类型的文件 --> > <i class="el-icon-upload"></i> 点击<em>上传</em> </el-upload> </template> <script> import axios from 'axios'; export default { components: { ElUpload }, data() { return { fileList: [], uploadUrl: 'your-api-url-to-upload', // 替换为你实际的上传接口地址 }; }, methods: { handleChange(file) { if (!file.type.includes('application/vnd.ms-excel')) { this.$message.error('只支持Excel文件'); return; } const reader = new FileReader(); reader.onload = (e) => { axios.post(this.uploadUrl, e.target.result, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { console.log('上传成功:', response); // 更新文件列表或处理服务器响应 }) .catch(error => { console.error('上传失败:', error); }); }; reader.readAsArrayBuffer(file); } } }; </script> ``` 在这个例子中,当用户选择一个Excel文件后,`handleChange`方法会读取文件内容,并使用axios发送POST请求到指定的API。注意,由于浏览器安全限制,`FileReader` API只能读取二进制数据,所以我们需要设置`Content-Type`为`multipart/form-data`以便于服务器识别。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值