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) 用到两个对象 第一个对象: ...
随机推荐
- 20155315庄艺霖第三次作业之Linux初体验
Linux初体验 安装Linux三两事 老师的作业要求基于VirtualBox安装Linux系统,我一开始下载了VB但是电脑运行不了,后来看网上的教程下载了VMware,才算开始了我的Linux之旅. ...
- C#基础之委托
委托常常和事件在一起使用,可以理解委托是方法的容器,事件则是委托的另一种表现形式.委托和事件虽然写得还比较多,不过也只是用的熟练而已,趁周末没课好好巩固下基础,一点一点积累吧. 1.一个简单的小例子 ...
- Mysql本地安装多实例后启动遇到的问题
一.本文紧接上一篇[win10-MySql免安装版-安装/多实例] 在上一篇文章里,安装Mysql解压版后,复制多份到本地,实现了多实例的安装 在后续启动其它实例的时候会遇到一些问题,以下就是自己遇到 ...
- 成都Uber优步司机奖励政策(4月13日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- VS2010 不显示 最近使用的项目 解决办法
昨天重装了VS2010,然后开了项目看了下今天早上再打开发现起始页近使用项目列表是空白的,每次打开项目都要去到指定目录去找解决方案才能打开,感觉很麻烦,在网上找了下解决方案,解决步骤下:菜单 —— 运 ...
- mac php版本切换
mac os 中自带php版本,但是很多扩展是不带的. 这个网站: http://php-osx.liip.ch/提供了几乎所有的php版本 通过输入 curl -s http://php-osx.l ...
- 三、Django安装和流程
一.MVC模式 MVC(Model-View-Controller),中文名“模型-视图-控制器”,是一个好的Web应用开发所遵循的模式,它有利于把Web应用的代码分解为易于管理的功能模块. M:Mo ...
- equals和==方法比较(一)
问题描述 今天在使用spotbugs代码走查时发现这样一个问题,两个Long类型的变量使用==判断数值是否相等,spotbugs提示这是一个很致命的错误,代码大概如下, Long l1=123l; L ...
- vbox虚拟机扩容(CentOS 7.2)
Preface My virtual machine was simply created by vagrant in default mode without anything about th ...
- 【sed】常用命令
替换 替换某一整行 sed '1c hello' test #将第一行替换为hello str1替换为str2 sed 's/^str1.*/str2/' filename #以str1开头 sed ...