上传文件(单文件)(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 ...
随机推荐
- 认识web前端
对于一个只是浅尝辄止c语言.学过汇编语言的我,思考了半年终于在这一天入了坑,学习web前端. web前端,看着这个名字好高大上,其实我目前的理解就是写页面,是各种图片动画文字在一个页面上呈现,再一点能 ...
- 读取 RSSI
在 TI 给的 SimpleBleCentral demo 里,读取 RSSI 的原理是:按 CC2540EM 的下键,然后调用 GapCentralRole 里的函数,启动定时器,不断向 OSAL ...
- 《统计推断(Statistical Inference)》读书笔记——第3章 统计分布族
在科学研究中最重要的两种思维范式是“简化”和“还原”,所谓“简化”是指人依据不太复杂的,可理解的规律认识世界:所谓“还原”是指任何复杂的现象归根结底可以由若干简单的机制解释.各种统计分布族就是统计学中 ...
- 030. asp.net中DataList数据绑定跳转(两种方式)的完整示例
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
- jq+jsonp+ajax解决跨域问题
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...
- JS--事件模块
一.JS event 的浏览器兼容 说到JS事件,不能不先讲一下事件流 1 事件流的定义:事件流是指从页面中接收事件的顺序 如下图所示,假设有四个圆层叠在一起,如果我们单击图中最里面的那个圆,那么我们 ...
- Delphi 2010错误 "displayNotification: 内存不够"
打开 Delphi 2010 的时候, 它报一个错误 "displayNotification: 内存不够",从而无法使用 Delphi , 解决办法 摘自http://www.cnblogs.com ...
- JS操作iframe
1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...
- VS2010快捷键大全
VS2010版快捷键 Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O ...
- Cordova从服务器更新客户端的JS文件
思路: 1.主要使用 Cordova的File插件 2.获取需要替换的js文件安装后的路径 3.软件使用js发起ajax请求,后台返回版本号跟客户端版本号对比 4.如果发现需要更新js文件,则用js调 ...