页面部分
<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); } }