由于样式需要不能直接用file,只能用文本框+按钮
<form class="form-horizontal form-bordered form-row-strippe" enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo" data-toggle="validator"> <div class="modal-body"> <div class="form-horizontal"> <div class="control-group"> <label class="control-label" style=" 125px;"> 审批项目名称:</label> <div class="controls" style="margin-left: 0px;"> <input type="text" id="id" name="id" style="display:none;" value="$id$" /> <input type="text" id="projectname" name="projectname" class="m-wrap large" value="$projectname$" /> </div> </div> <div class="control-group"> <label class="control-label" style=" 125px;"> 审批项目说明:</label> <div class="controls" style="margin-left: 0px;"> <input class="m-wrap large" type="text" id="projectinfo" name="projectinfo" value="$projectinfo$" /> </div> </div> <div class="control-group"> <label class="control-label" style=" 125px;"> 审批项目文件:</label> <div class="controls" style="margin-left: 0px;"> <input type="file" id="filepath" name="filepath" style="display:none" onchange="changetext()" /> <input class="m-wrap" type="text" id="pathfile" name="pathfile" readonly="readonly" value="$filepath$" /> <input class="btn green" type="button" value="选择文件" id="uploadpath" /> </div> </div> </div> </div> <div class="modal-footer bg-info"> <input class="btn blue" type="button" id="btnsubmit" value="提交" onclick="update()" data-dismiss="modal" /> <button type="button" class="btn green" data-dismiss="modal"> 取消</button> </div> </form>
1 <script type="text/javascript"> 2 jQuery(document).ready(function () { 3 $('#uploadpath').click('click', function () { 4 $('#filepath').trigger('click'); 5 }); 6 }) 7 function changetext() 8 { 9 if ($("#filepath").val() == "") { 10 //当用户没有选择文件时,不修改原有路径 11 } 12 else { 13 $("#pathfile").val($("#filepath").val()); 14 } 15 } 16 function update() { 17 var projectname = $("#projectname").val(); 18 var projectinfo = $("#projectinfo").val(); 19 var filepath = $("#pathfile").val(); 20 //var formData = new FormData($("#fileinfo")[0]);//两者皆可 21 var formData = new FormData(document.forms.namedItem("fileinfo")); 22 formData.append("id", $id$); 23 $.ajax({ 24 url: "/ApprovalProcessNoView/queryeditproject", 25 type: "POST", 26 data: formData, 27 async: false, 28 cache: false, 29 contentType: false, 30 processData: false, 31 success: function (data) { 32 alert(data.msg); 33 }, 34 error: function (data) { 35 alert(data.msg); 36 } 37 }); 38 } 39 </script>
1 returnresult rr = new returnresult(); 2 string projectname = Request.Form["projectname"]; 3 string projectinfo = Request.Form["projectinfo"]; 4 HttpPostedFileBase pathfile = Request.Files["filepath"]; 5 long id = Request.Form["id"].ToLong(); 6 7 string path = "/UF/Uploads/myfile"; 8 //获取上传目录 转换为物理路径 9 string uploadPath = Server.MapPath(path); 10 //判断目录是否存在 11 if (!Directory.Exists(uploadPath)) 12 { 13 Directory.CreateDirectory(uploadPath); 14 } 15 //保存文件的物理路径 16 string saveFile = uploadPath + pathfile.FileName; 17 //保存图片到服务器 18 try 19 { 20 pathfile.SaveAs(saveFile); 21 rr.status = true; 22 } 23 catch (Exception) 24 { 25 rr.status = false; 26 rr.msg = "文件上传失败"; 27 }
主要使用:FormData
效果:将文件和其他需要上传的数据一起上传