Vue.js 上传文件(后台使用.net)
页面部分
<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)的更多相关文章
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
- js 上传文件后缀名的判断 var flag=false;应用
js 上传文件后缀名的判断 var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- 关于vue+axios上传文件的踩坑分析
上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做 ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 原生js上传文件,使用new FormData()
当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...
- django + dropzone.js 上传文件
1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...
- js上传文件
一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...
随机推荐
- 20155236 《信息安全概论》实验二(Windows系统口令破解)实验报告
20155236 <信息安全概论>实验二(Windows系统口令破解)实验报告 北京电子科技学院(BESTI) 实验报告 课程:信息安全概论 班级:1552 姓名:范晨歌 学号:20155 ...
- noone is not in the sudoers file ubuntu
Login as root or su to get root prompt type visudo an editor will open find a line says root ALL=( ...
- BZOJ1597_土地购买_KEY
题目传送门 一道斜率优化的题目. 但暴力方程很关键. 我们先将x作为关键字Sort一遍,再将y处理成单调递减,即把无用的土地去除. f[i]=f[j]+a[i]*b[j+] -a[i]*b[j+]+f ...
- 1111: [POI2007]四进制的天平Wag
1111: [POI2007]四进制的天平Wag 链接 题意: 用一些四进制数,相减得到给定的数,四进制数的数量应该尽量少,满足最少的条件下,求方案数. 分析: 这道题拖了好久啊. 参考Claris的 ...
- Python socket网络模块
一.基于TCP协议的socket通信 以打电话为理解方式进行TCP的通信. Server端代码: import socket phone = socket.socket(socket.AF_INET, ...
- 使用三层交换机实现不同vlan的互通
如下拓扑图所示,要实现vlan10(192.168.10.0/24)与vlan 20(192.168.20.0/24)的网络互通. 三层交换机配置: 创建vlan:Switch#configure t ...
- MySQL入门篇(四)之MySQL主从复制
一.MySQL主从复制原理 随机站点访问量的鞥集啊,单台的MySQL服务器压力也不断地增加,此时需要对MySQL进行优化,如果在MySQL优化无明显改善时期,可以使用高可用.主从复制.读写分离.分库分 ...
- 微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
- Python爬虫与反爬虫(7)
[Python基础知识]Python爬虫与反爬虫(7) 很久没有补爬虫了,相信在白蚁二周年庆的活动大厅比赛中遇到了关于反爬虫的问题吧 这节我会做个基本分享. 从功能上来讲,爬虫一般分为数据采集,处理, ...
- JY播放器【喜马拉雅FM电脑端,附带下载功能】
今天给大家带来一款神器----JY播放器.可以不用打开网页就在电脑端听喜马拉雅FM的节目,而且可以直接下载,对于我这种强迫症患者来说真的是神器.我是真的不喜欢电脑任务栏上面密密麻麻的. 目前已经支持平 ...