asp.net mvc ajax FileUpload
//后台代码 [HttpPost] public ActionResult CreateCategory(HttpPostedFileBase file) { string url = Upload(file); if(url== "empty") { return Json("{state:fault}"); } factory.Endpoint.Behaviors.Add(new WebHttpBehavior()); var proxy = factory.CreateChannel(); //用户组请求类 ServicePostRequest<Guoany_Ga_B2BGCategory_InsertOrUpdate_Request> request = new ServicePostRequest<Guoany_Ga_B2BGCategory_InsertOrUpdate_Request>(); request.ExtraData = new Guoany_Ga_B2BGCategory_InsertOrUpdate_Request(); request.ExtraData.Parent_Id = ""; request.ExtraData.Creater = ""; request.ExtraData.Creattime = DateTime.Now; request.ExtraData.Des = ""; request.ExtraData.Category_Id = Guid.NewGuid().ToString(); request.ExtraData.Category_Name = ""; request.ExtraData.Category_Url = url; request.ExtraData.Is_del = false; request.ExtraData.Is_show = true; request.ExtraData.Is_Special = false; request.ExtraData.Sort_No = 1; ServicePostResponse<Guoany_Ga_B2BGCategory_InsertOrUpdate_Response> response = proxy.InsertOrUpdateB2B_G_Category(request); // ViewData["Group_Response"] = response.Data; bool result = response.Success; return Json("{state:success}"); } public string Upload(HttpPostedFileBase file) { if (file == null) { return "empty"; } var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName)); if (Directory.Exists(Server.MapPath("~/Upload")) == false)//如果不存在就创建file文件夹 { Directory.CreateDirectory(Server.MapPath("~/Upload")); } file.SaveAs(fileName); return "upload/"+Path.GetFileName(file.FileName); } //----------------------------------------------------------------------------------------- //前台代码 @{ ViewBag.Title = "类别列表"; } <script type="text/javascript"> $(function () { var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid pager.pagination({ buttons: [{ iconCls: 'icon-search', handler: function () { $('#dg').datagrid("reload"); } }, { iconCls: 'icon-add', handler: function () { alert('add'); } }, { iconCls: 'icon-edit', handler: function () { alert('edit'); }, iconCls: 'icon-remove', handler: function () { alert('删除'); } }] }); }) function searchCategory() { var stopOrenable = $('#stopOrenable').combobox('getValue'); var txtCategoryName = $("#txtCategoryName").val(); var showOrNot = $("#showOrNot").is(":checked") == true ? 1 : 0; var specilCategory = $("#specilCategory").is(":checked") == true ? 1 : 0; $('#dg').datagrid('load', { queryParams: { stopOrenable: stopOrenable, txtCategoryName: txtCategoryName, showOrNot: showOrNot, specilCategory: specilCategory } }); //var randnum = Math.floor(Math.random() * 1000000); //alert(randnum) //var urls = '/Category_Manage/GetCategoryJsonList?randnum=' + randnum; } function addCategory() { $('#dd').dialog('open'); } function editCategory() { } function showCategory() { } function hidenCategory() { } function enabledCategory() { } function stopCategory() { } </script> <script type="text/javascript"> function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) { alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !"); imgFile.focus(); } else { var path; if (document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML = ""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 } else//FF { path = window.URL.createObjectURL(imgFile.files[0]); var i = 0; i++; $("#imgPreview").append("<img id='img" + i + "' width='120px' height='100px' src='" + path + "'/>"); } } } function submitContent() { var formData = new FormData(); var file = document.getElementById("upload").files[0]; formData.append("file", file); $.ajax({ type: "POST", url: '@Url.Action("CreateCategory", "Category_Manage")', data: formData, dataType: 'json', contentType: false, processData: false, success: function (response) { alert("sucess"); }, error: function (error) { alert("fault"); } }); } </script> <table id="dg" class="easyui-datagrid" title="商品类别列表" style="width:100%;height:250px" data-options="rownumbers:true,singleSelect:true,url:'/Category_Manage/GetCategoryJsonList',method:'get',toolbar:'#tb',footer:'#ft',pagination:true"> <thead> <tr> <th data-options="field:'ParentCategoryName',width:80">上级类目</th> <th data-options="field:'Category_Name',width:100">类目名称</th> <th data-options="field:'Is_Del',width:80,align:'right'">启用状态</th> <th data-options="field:'Des',width:80,align:'right'">描述</th> <th data-options="field:'Is_Special',width:240">是否特殊项目</th> <th data-options="field:'Is_show',width:60,align:'center'">展示状态</th> <th data-options="field:'Sort_No',width:60,align:'center'">排序</th> </tr> </thead> </table> <div id="tb" style="padding:2px 5px;"> <div> <input type="button" value="新增" onclick="addCategory()" /> <input type="button" value="编辑" onclick="editCategory()" /> <input type="button" value="展示" onclick="showCategory()" /> <input type="button" value="隐藏" onclick="hidenCategory()" /> <input type="button" value="启用" onclick="enabledCategory()" /> <input type="button" value="停用" onclick="stopCategory()" /> </div> 类目名称 <input id="txtCategoryName" style="width:110px"> 是否停用 <select id="stopOrenable" class="easyui-combobox" panelHeight="auto" style="width:100px"> <option value="1">是</option> <option value="0">否</option> </select> <input type="checkbox" id="specilCategory" /> 特殊类目 <input type="checkbox" id="showOrNot" /> 是否展示 <a href="#" id="search" class="easyui-linkbutton" onclick="searchCategory()" iconCls="icon-search">搜索</a> </div> <div id="dd" class="easyui-dialog" title="新增/编辑" data-options="iconCls:'icon-save',closed:true,modal: true,cache: false" style="width:800px;height:600px;padding:10px"> @using (Html.BeginForm("CreateCategory", "Category_Manage", FormMethod.Post, new { enctype = "multipart/form-data" })) { <table style="border:1px solid ;width:700px;height:500px;"> <tr> <td>父类目:<input type="text" /></td> <td colspan="2"> 图片上传:<input type="file" name="file" style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" /> <div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;"></div> </td> </tr> <tr><td>类目:<input type="text" /></tr> <tr><td>是否特殊类目:<input type="checkbox" /></td><td>是否显示:<input type="checkbox" /></td></tr> <tr><td rowspan="1">类描述<textarea rows="2"></textarea></td></tr> <tr><td rowspan="1"><input onclick="submitContent()" value="提交" /></td></tr> </table> } </div>