页面部分

<div id="app">
<form id="myform">
<input type="file" name="fileup" id="fileup" v-on:change="fileChange($event)" />
</form> <br />
{{img}}
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {
img:""
},
methods: {
fileChange: function (el) {
if (!el.target.files[].size) return; var obj = new FormData(document.getElementById("myform"));
obj.append("name", "wzh");
var _this = this;
$.ajax({
type: 'post',
url: '/home/ajax',
data: obj,
cache: false,
processData: false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType: false, // 不设置Content-type请求头
success: function (res) {
var arr=res.split(':');
if(arr[]=="ok"){
_this.img=arr[];
}else{
alert(arr[]);
}
},
});
},
}
})
</script>

Controller

public ActionResult ajax()
{
try
{
HttpPostedFileBase uploadfile = Request.Files["fileup"];
if (uploadfile == null)
{
return Content("no:非法上传");
}
if (uploadfile.FileName == "")
{
return Content("no:请选择文件");
} string fileExt = Path.GetExtension(uploadfile.FileName);
StringBuilder sbtime = new StringBuilder();
sbtime.Append(DateTime.Now.Year).Append(DateTime.Now.Month).Append(DateTime.Now.Day).Append(DateTime.Now.Hour).Append(DateTime.Now.Minute).Append(DateTime.Now.Second);
string dir = "/UploadFile/" + sbtime.ToString() + fileExt;
string realfilepath = Request.MapPath(dir);
string readDir = Path.GetDirectoryName(realfilepath);
if (!Directory.Exists(readDir))
Directory.CreateDirectory(readDir); uploadfile.SaveAs(realfilepath);
return Content("ok:" + dir);
}
catch (Exception ex)
{
return Content("no:" + ex.Message);
}
}

Vue.js 上传文件(后台使用.net)的更多相关文章

  1. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  2. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  4. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  5. 关于vue+axios上传文件的踩坑分析

    上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做 ...

  6. 纯js上传文件 很好用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 原生js上传文件,使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

  8. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

  9. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

随机推荐

  1. Wiki版产品需求---产品需求文档到底是谁的?产品到底是谁的?

    在听了测试的一通唠叨之后,"内部实现一堆逻辑,只有一句话的需求文档","文档那么简单,我们怎么测试啊",心中突然想起来自己曾经干的一件当时觉得还不错的事情,但是 ...

  2. Java——基于java自身包实现消息系统间的通信(TCP/IP+NIO)

    /** * Created by LiuHuiChao on 2016/11/15. * description:based on TCP/IP+NIO to deliver the message ...

  3. gitlab在push代码的时候报错

    一.问题报错 gitlab在执行git pull origin master,拉取代码的时候报如下错误. $ git pull origin master remote: Counting objec ...

  4. OpenStack入门篇(八)之镜像服务Glance

    一.Glance的概述 Glance是为虚拟机的创建提供镜像的服务,我们基于Openstack是构建基本的IaaS平台对外提供虚拟机,而虚拟机在创建时必须为选择需要安装的操作系统,Glance服务就是 ...

  5. Q&As:1.cocos2d-html5如何获得鼠标划过事件

    不喜欢按部就班学东西,感觉各种框架各种技术就应该是拿到手用的,这应该是导致我现在学了这么多却没一样精通的缘故吧. 发现自己喜欢在QQ群回答一些菜鸟的问题,就算自己不清楚也会乐意看代码帮助解决╮(╯_╰ ...

  6. PowerDesigner 15学习笔记:十大模型及五大分类

    个人认为PowerDesigner 最大的特点和优势就是1)提供了一整套的解决方案,面向了不同的人员提供不同的模型工具,比如有针对企业架构师的模型,有针对需求分析师的模型,有针对系统分析师和软件架构师 ...

  7. 我们一起学习WCF 第五篇数据协定和消息协定

    A:数据协定(“数据协定”是在服务与客户端之间达成的正式协议,用于以抽象方式描述要交换的数据. 也就是说,为了进行通信,客户端和服务不必共享相同的类型,而只需共享相同的数据协定. 数据协定为每个参数或 ...

  8. Linux☞如何修改文件权限

    修改文件/目录的权限:chmod  规则 文件/目录名 规则: 角色:u 自己人  user g 同组人 group         o 其他人 other a 所有人 all 操作: + - 权限 ...

  9. Select 、Poll 和 Epoll

    作用 Epoll 和 Select 的作用都是为了多I/O同步复用的问题,利用Epoll.Poll或Select函数指定内核监听多个I/O的读.写.异常事件,避免每一个I/O都指定一个处理线程,导致开 ...

  10. Spring Task中的定时任务无法注入service的解决办法

    1.问题 因一个项目(使用的是Spring+SpringMVC+hibernate框架)需要在spring task定时任务中调用数据库操作,在使用 @Autowired注入service时后台报错, ...