由于样式需要不能直接用file,只能用文本框+按钮

  1. <form class="form-horizontal form-bordered form-row-strippe" enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo" data-toggle="validator">
  2. <div class="modal-body">
  3. <div class="form-horizontal">
  4. <div class="control-group">
  5. <label class="control-label" style="width: 125px;">
  6. 审批项目名称:</label>
  7. <div class="controls" style="margin-left: 0px;">
  8. <input type="text" id="id" name="id" style="display:none;" value="$id$" />
  9. <input type="text" id="projectname" name="projectname" class="m-wrap large" value="$projectname$" />
  10. </div>
  11. </div>
  12. <div class="control-group">
  13. <label class="control-label" style="width: 125px;">
  14. 审批项目说明:</label>
  15. <div class="controls" style="margin-left: 0px;">
  16. <input class="m-wrap large" type="text" id="projectinfo" name="projectinfo" value="$projectinfo$" />
  17. </div>
  18. </div>
  19. <div class="control-group">
  20. <label class="control-label" style="width: 125px;">
  21. 审批项目文件:</label>
  22. <div class="controls" style="margin-left: 0px;">
  23. <input type="file" id="filepath" name="filepath" style="display:none" onchange="changetext()" />
  24. <input class="m-wrap" type="text" id="pathfile" name="pathfile" readonly="readonly" value="$filepath$" />
  25. <input class="btn green" type="button" value="选择文件" id="uploadpath" />
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="modal-footer bg-info">
  31. <input class="btn blue" type="button" id="btnsubmit" value="提交" onclick="update()" data-dismiss="modal" />
  32. <button type="button" class="btn green" data-dismiss="modal">
  33. 取消</button>
  34. </div>
  35. </form>

(HTML)

  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>

(JAVASCRIPT)

  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. }

(后台代码【C#】)

主要使用:FormData

效果:将文件和其他需要上传的数据一起上传

上传文件(单文件)(FormData)(前端代码+.NET服务器端)的更多相关文章

  1. SpringMVC文件上传下载(单文件、多文件)

    前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...

  2. Struts1文件上传、单文件、多文件上传【Struts1】

     将struts1文件上传的操作汇总了一下,包括单文件上传和多文件上传,内容如下,留作备忘: Struts2实现文件上传的文章(http://blog.csdn.net/itwit/article/d ...

  3. Spring MVC-------文件上传,单文件,多文件,文件下载

    Spring MVC 框架的文件上传是基于 commons-fileupload 组件的文件上传,只不过 Spring MVC 框架在原有文件上传组件上做了进一步封装,简化了文件上传的代码实现,取消了 ...

  4. SpringBoot - 实现文件上传1(单文件上传、常用上传参数配置)

    Spring Boot 对文件上传做了简化,基本做到了零配置,我们只需要在项目中添加 spring-boot-starter-web 依赖即可. 一.单文件上传 1,代码编写 (1)首先在 stati ...

  5. flask 文件上传(单文件上传、多文件上传)

    文件上传 在HTML中,渲染一个文件上传字段只需要将<input>标签的type属性设为file,即<input type=”file”>. 这会在浏览器中渲染成一个文件上传字 ...

  6. struts文件上传(单文件)

    第01步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  7. php文件上传之单文件上传

    为了简单一些,php文件跟form表单写在了一个文件里. php单文件上传----> <!DOCTYPE html> <html> <head> <me ...

  8. java文件上传(单文件 多文件)与删除

    /** * 文件上传--单文件 * * @param request * @param response * @param path * 文件存放路径(path为WebApp\后面的内容) * @re ...

  9. struts文件上传(多文件)

    第01步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  10. skymvc文件上传支持多文件上传

    skymvc文件上传支持多文件上传 支持单文件.多文件上传 可以设定 文件大小.存储目录.文件类型 //上传的文件目录 $this->upload->uploaddir="att ...

随机推荐

  1. java common-io jar API

    import org.apache.commons.beanutils.BeanUtils;public class Person { private String name; public Stri ...

  2. DOM节点关系,节点关系

    DOM节点关系 定义 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同, ...

  3. IT 相关期刊

    码农周刊查阅地址: http://weekly.manong.io/issues/ 快乐码农查阅地址: http://www.codeceo.com/article/category/weekly

  4. selenium之xpath定位和input文本

    selenium之xpath定位和input文本 xpath简单定位: 打开浏览器的F12 在自己需要定位的元素的那里右键 选择copy->xpath selenium获取input下的文本: ...

  5. 线下线上对接的一种思路(本地erp与线上电子商务平台对接)

    目前很多公司都希望本地的ERP能够与线上的电子商务平台进行对接. 但是很多的线下ERP系统商不愿意修改代码来做相应的对接,或者觉得太话费成本. 而对于企业本身,又会有很多的特殊需求. 下面略述一家进口 ...

  6. Android 百度地图的使用

    可以参考百度官网Android开发指南. 里面有详细的步骤和Sample例子. http://lbsyun.baidu.com/index.php?title=androidsdk/guide/int ...

  7. Delphi ActiveX Form的使用实例

    Delphi ActiveX Form的使用实例 By knityster 1. ActiveX控件简介 ActiveX控件也就是一般所说的OCX控件,它是ActiveX技术的一部分. ActiveX ...

  8. 02 Linux 下安装JDK并测试开发“Hello World!”

    测试环境 主机系统:Win7 64位 虚拟机:VMware® Workstation 11.1.0 虚拟机系统:CentOS 6.5 64位   Kernel 2.6.32-431.e16.x86_6 ...

  9. Electron实战:创建ELectron开发的window应用安装包

    前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中winds ...

  10. Linux中cp和scp命令的使用方法

    Linux为我们提供了两个用于文件copy的命令,一个是cp,一个是scp,但是他们略有不同. cp --- 主要是用于在同一台电脑上,在不同的目录之间来回copy文件 scp --- 主要是在不同的 ...