页面部分
<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[0].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[0]=="ok"){ ???????????????????????????_this.img=arr[1]; ???????????????????????}else{ ???????????????????????alert(arr[1]); ???????????????????????} ???????????????????}, ???????????????}); ???????????}, ???????} ???})</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)
原文地址:http://www.cnblogs.com/lunawzh/p/7520304.html