<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="vueform.aspx.cs" Inherits="WebApplication1.test.vueform" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vue表单提交</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head>
<body>
<form id="form" runat="server">
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" name="fileup" id="fileup" v-on:change="fileChange($event)" />
<button v-on:click="add">
提交</button>
</form>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#form',
data: {
name: '',
age: '',
file: ''
},
methods: {
add: function (event) {
var that = this;
var username = that.name;
var userage = that.age;
$.ajax({
type: 'post',
url: '/Handler/Handler1.ashx',
data: { "username": username, "userage": userage },
success: function (res) {
alert("返回值:" + res);
}
});
},
fileChange: function (el) {
alert(22);
// if (!el.target.files[0].size) return;
// var obj = new FormData(document.getElementById("form"));
// obj.append("name", "wzh");
// var _this = this;
// $.ajax({
// type: 'post',
// url: '/Handler/Handler1.ashx',
// 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>
后台接收数据:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Text;
namespace WebApplication1.Handler
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//HttpPostedFile uploadfile = context.Request.Files["fileup"];
//if (uploadfile == null)
//{
// context.Response.Write("no:非法上传");
// return;
//}
//if (uploadfile.FileName == "")
//{
// context.Response.Write("no:请选择文件");
// return;
//}
//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 = context.Request.MapPath(dir);
//string readDir = Path.GetDirectoryName(realfilepath);
//if (!Directory.Exists(readDir))
// Directory.CreateDirectory(readDir);
//uploadfile.SaveAs(realfilepath);
//context.Response.Write("ok");
string name = context.Request["username"].ToString();
context.Response.Write(name);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}