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) 用到两个对象 第一个对象: ...
随机推荐
- 《JAVA程序设计》20155214 实验一 Java开发环境的熟悉(Linux + IDEA)
<JAVA程序设计> 实验一 Java开发环境的熟悉(Linux + IDEA) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Ja ...
- 2017-2018-1 20155230 《信息安全技术》实验二——Windows口令破解
2017-2018-1 20155230 <信息安全技术>一.Windows口令破解 1.字典破解 (1)为本机创建新用户.为了达到实验效果,用户口令不要设置得过于复杂,可以选择自己的生日 ...
- 20155319 2016-2017-2《Java程序设计》课程总结
20155319 2016-2017-2<Java程序设计>课程总结 每周作业链接 预备作业1:亦师亦友--我所期望的师生关系,对专业的认识与期望等 预备作业2:没有了自主,学习的小船说翻 ...
- SRM 698 div1 RepeatString
250pts RepeatString 题意:问最少修改多少次将一个字符串修改为AA的形式.可以插入一个字符,删除一个字符,修改字符. 思路:枚举分界点,然后dp一下. /* * @Author: m ...
- 9.15 DP合集水表
9.15 DP合集水表 显然难了一些啊. 凸多边形的三角剖分 瞄了一眼题解. 和蛤蛤的烦恼一样,裸的区间dp. 设f[i][j]表示i~j的点三角剖分最小代价. 显然\(f[i][i+1]=0,f[i ...
- TensorFlow深度学习实战---图像数据处理
图像的亮度.对比度等属性对图像的影响非常大,这些因素都会影响最后的识别结构.当然,复杂的预处理过程可能会导致训练效率的下降(利用TensorFlow中多线程处理输入数据的解决方案). 同一不同的原始数 ...
- halcon学习相关资料(转载)
https://blog.csdn.net/maweifei/article/details/78162581 论坛.培训 halcon学习网:http://www.ihalcon.com/ 鸟叔机器 ...
- 牛客网暑期ACM多校训练营(第一场):E-Removal(DP)
链接:E-Removal 题意:给出序列 s1, s2, ..., sn ,1<=s[i]<=10.问删除m个数后,有多少种不同的序列. 题解:定义dp[i][j]代表长度为i,最末尾的数 ...
- 136.只出现一次的数字 leetcode ^运算符 JavaScript解法
leetcode上的一道题简单题 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间 ...
- nginx 源码阅读 core
ngx_config.h 数据对齐 #define ngx_align(d, a) (((d) + (a - 1)) & ~(a - 1)) ngx_core.h #define ng ...