FormData 上传附件

2 篇文章 0 订阅

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
来源

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

c#

   if (context.Request.Files.Count > 0)
                {
                    string dire = "/doc/attach/myTollGateItem/" + forms["id"].ToString() + "/";
                    string path = context.Server.MapPath(dire);
                    if (!System.IO.Directory.Exists(path))//判断文件夹是否已经存在
                    {
                        System.IO.Directory.CreateDirectory(path);//创建文件夹
                    }
                    pub newpub = new pub();
                    for (int i = 0; i < context.Request.Files.Count; i++)
                    {
                        HttpPostedFile f = context.Request.Files[i];
                        Random rd = new Random();
                        if (f.FileName != "")
                        {
                            string pn = newpub.rdm(10) + DateTime.Now.Millisecond.ToString() + "." + f.FileName.Split('.')[f.FileName.Split('.').Length - 1];
                            f.SaveAs(path + "/" + pn);
                            //                           project_id, 
                            //check_list_id, 
                            //action_id, 
                            //file_path, 
                            //sort_id, 
                            //modify_time, 
                            //modify_user, 
                            //action_sys_id
                            //   toll_gate_project_cklist_file

                            string sql = "insert into toll_gate_project_cklist_file(check_list_sysid,file_path,sort_id,modify_user)values('" + forms["elem_id"] + "','" + dire + pn + "','" + i.ToString() + "','" + xm + "')";
                            new DataProvier().RunSql(sql, "", DCoolWeb.Data.DbType.Oracle);
                        }
                    }
                }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中实现上附件(例如Excel文件),你可以按照以下步骤进行操作: 1. 在Vue组件的模板中,添加一个文件上的`<input>`元素: ```html <template> <div> <input type="file" @change="handleFileUpload" /> </div> </template> ``` 2. 在Vue组件的`data`中定义一个变量来存储上的文件: ```javascript export default { data() { return { file: null }; }, methods: { handleFileUpload(event) { this.file = event.target.files[0]; } } }; ``` 3. 在Vue组件的方法中,使用`FormData`对象来构建上请求,并通过`axios`或其他HTTP库将文件发送到服务器: ```javascript import axios from 'axios'; export default { // ... methods: { handleFileUpload(event) { this.file = event.target.files[0]; let formData = new FormData(); formData.append('file', this.file); axios.post('/api/upload', formData) .then(response => { // 处理上成功的响应 }) .catch(error => { // 处理上失败的错误 }); } } }; ``` 4. 在后端服务器中,接收并处理文件上请求。具体的方法取决于你使用的后端技术栈。例如,使用Node.js和Express框架,你可以这样处理上请求: ```javascript const express = require('express'); const app = express(); const multer = require('multer'); // 创建一个Multer实例,指定上文件的保存目录和文件名 const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/'); }, filename: function (req, file, cb) { cb(null, file.originalname); } }); const upload = multer({ storage: storage }); // 处理文件上请求的路由 app.post('/api/upload', upload.single('file'), (req, res) => { // 在这里处理上的文件 res.sendStatus(200); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 上述代码中,上的文件会保存在`uploads/`目录下,并保留原始文件名。你可以根据实际需求调整保存目录和文件名的逻辑。 这样,你就可以在Vue中实现上附件(Excel文件)的功能了。记得根据你的实际情况进行相应的调整和错误处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值