上传文件(单文件)(FormData)(前端代码+.NET服务器端)
由于样式需要不能直接用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="width: 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="width: 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="width: 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>
(HTML)
- <script type="text/javascript">
- jQuery(document).ready(function () {
- $('#uploadpath').click('click', function () {
- $('#filepath').trigger('click');
- });
- })
- function changetext()
- {
- if ($("#filepath").val() == "") {
- //当用户没有选择文件时,不修改原有路径
- }
- else {
- $("#pathfile").val($("#filepath").val());
- }
- }
- function update() {
- var projectname = $("#projectname").val();
- var projectinfo = $("#projectinfo").val();
- var filepath = $("#pathfile").val();
- //var formData = new FormData($("#fileinfo")[0]);//两者皆可
- var formData = new FormData(document.forms.namedItem("fileinfo"));
- formData.append("id", $id$);
- $.ajax({
- url: "/ApprovalProcessNoView/queryeditproject",
- type: "POST",
- data: formData,
- async: false,
- cache: false,
- contentType: false,
- processData: false,
- success: function (data) {
- alert(data.msg);
- },
- error: function (data) {
- alert(data.msg);
- }
- });
- }
- </script>
(JAVASCRIPT)
- returnresult rr = new returnresult();
- string projectname = Request.Form["projectname"];
- string projectinfo = Request.Form["projectinfo"];
- HttpPostedFileBase pathfile = Request.Files["filepath"];
- long id = Request.Form["id"].ToLong();
- string path = "/UF/Uploads/myfile";
- //获取上传目录 转换为物理路径
- string uploadPath = Server.MapPath(path);
- //判断目录是否存在
- if (!Directory.Exists(uploadPath))
- {
- Directory.CreateDirectory(uploadPath);
- }
- //保存文件的物理路径
- string saveFile = uploadPath + pathfile.FileName;
- //保存图片到服务器
- try
- {
- pathfile.SaveAs(saveFile);
- rr.status = true;
- }
- catch (Exception)
- {
- rr.status = false;
- rr.msg = "文件上传失败";
- }
(后台代码【C#】)
主要使用:FormData
效果:将文件和其他需要上传的数据一起上传
上传文件(单文件)(FormData)(前端代码+.NET服务器端)的更多相关文章
- SpringMVC文件上传下载(单文件、多文件)
前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...
- Struts1文件上传、单文件、多文件上传【Struts1】
将struts1文件上传的操作汇总了一下,包括单文件上传和多文件上传,内容如下,留作备忘: Struts2实现文件上传的文章(http://blog.csdn.net/itwit/article/d ...
- Spring MVC-------文件上传,单文件,多文件,文件下载
Spring MVC 框架的文件上传是基于 commons-fileupload 组件的文件上传,只不过 Spring MVC 框架在原有文件上传组件上做了进一步封装,简化了文件上传的代码实现,取消了 ...
- SpringBoot - 实现文件上传1(单文件上传、常用上传参数配置)
Spring Boot 对文件上传做了简化,基本做到了零配置,我们只需要在项目中添加 spring-boot-starter-web 依赖即可. 一.单文件上传 1,代码编写 (1)首先在 stati ...
- flask 文件上传(单文件上传、多文件上传)
文件上传 在HTML中,渲染一个文件上传字段只需要将<input>标签的type属性设为file,即<input type=”file”>. 这会在浏览器中渲染成一个文件上传字 ...
- struts文件上传(单文件)
第01步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
- php文件上传之单文件上传
为了简单一些,php文件跟form表单写在了一个文件里. php单文件上传----> <!DOCTYPE html> <html> <head> <me ...
- java文件上传(单文件 多文件)与删除
/** * 文件上传--单文件 * * @param request * @param response * @param path * 文件存放路径(path为WebApp\后面的内容) * @re ...
- struts文件上传(多文件)
第01步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
- skymvc文件上传支持多文件上传
skymvc文件上传支持多文件上传 支持单文件.多文件上传 可以设定 文件大小.存储目录.文件类型 //上传的文件目录 $this->upload->uploaddir="att ...
随机推荐
- java common-io jar API
import org.apache.commons.beanutils.BeanUtils;public class Person { private String name; public Stri ...
- DOM节点关系,节点关系
DOM节点关系 定义 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同, ...
- IT 相关期刊
码农周刊查阅地址: http://weekly.manong.io/issues/ 快乐码农查阅地址: http://www.codeceo.com/article/category/weekly
- selenium之xpath定位和input文本
selenium之xpath定位和input文本 xpath简单定位: 打开浏览器的F12 在自己需要定位的元素的那里右键 选择copy->xpath selenium获取input下的文本: ...
- 线下线上对接的一种思路(本地erp与线上电子商务平台对接)
目前很多公司都希望本地的ERP能够与线上的电子商务平台进行对接. 但是很多的线下ERP系统商不愿意修改代码来做相应的对接,或者觉得太话费成本. 而对于企业本身,又会有很多的特殊需求. 下面略述一家进口 ...
- Android 百度地图的使用
可以参考百度官网Android开发指南. 里面有详细的步骤和Sample例子. http://lbsyun.baidu.com/index.php?title=androidsdk/guide/int ...
- Delphi ActiveX Form的使用实例
Delphi ActiveX Form的使用实例 By knityster 1. ActiveX控件简介 ActiveX控件也就是一般所说的OCX控件,它是ActiveX技术的一部分. ActiveX ...
- 02 Linux 下安装JDK并测试开发“Hello World!”
测试环境 主机系统:Win7 64位 虚拟机:VMware® Workstation 11.1.0 虚拟机系统:CentOS 6.5 64位 Kernel 2.6.32-431.e16.x86_6 ...
- Electron实战:创建ELectron开发的window应用安装包
前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中winds ...
- Linux中cp和scp命令的使用方法
Linux为我们提供了两个用于文件copy的命令,一个是cp,一个是scp,但是他们略有不同. cp --- 主要是用于在同一台电脑上,在不同的目录之间来回copy文件 scp --- 主要是在不同的 ...