网上有各种各样的文件上传方法,有基于JS框架的、也有基于flash swf插件的。

这次分享一个比较简单而且实用能快速上手的文件上传方法,主要步骤:

1.引用Jquery包,我用的是jquery-1.11.3.min.js 版本

2.编写JS代码

3.HTML中增加type=file控件

代码如下:

HTML代码:

    <form id="fileupload" method="post"  enctype = "multipart/form-data">
<input type="file" id="fileid" name="fileid" accept="application/vnd.ms-excel">
     <input type="button" id="confirmuploadid" value="上传" />
</form>
//JS实现

$('#confirmuploadid').on('click', function () {
    uploadProduct();

});

function uploadProduct() {
var formid = $("#fileupload");
var fd = new FormData(formid[0]); //form表单的方式实例化一个formData
fd.append('file', $('#fileid')[0].files);
fd.append('userid', userid);
$.ajax({
url: 'File/Setting',
type: 'POST',
dataType: 'JSON',
data: fd,
async: false,
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
$("#confirmuploadid").prop("disabled", true);
},
success: function (returndata) {
$("#confirmuploadid").prop("disabled", false);
alert(returndata.Message);
},
error: function (returndata) {
alert("上传失败,请检查数据正确性,如:有些数字输入项,是否输入了字符!");
}
});
}
//MVC实现
public class FileController : Controller
{
[HttpPost]
public ActionResult Setting()
{
string userid = ""; string username = "";
FunctionBackMessage functionBackMessage = new FunctionBackMessage();
functionBackMessage.IsSuccess = false;
functionBackMessage.Message="上传失败,稍后重试!";
if (!string.IsNullOrEmpty(username))
{
HttpFileCollectionBase files = Request.Files;
string _urlstr = Request.Url.AbsoluteUri;
FunctionBackMessage fc = new FunctionBackMessage();
fc.IsSuccess = true; fc.Message = "上传成功";
if (files.AllKeys.Length > )
{
for (int i = ; i < files.AllKeys.Length; i++)
{
var myFile = files[i];
double myFileLength = myFile.ContentLength / 1024.0 / 1024.0;
int InputMediaExcelLength = !string.IsNullOrEmpty(Global.GetAppString("InputMediaExcelLength")) ? int.Parse(Global.GetAppString("InputMediaExcelLength")) : ; if (myFileLength > InputMediaExcelLength)//超出指定大小
{
fc.IsSuccess = false; fc.Message = "为了保证数据处理效率,每次上传文件小于" + InputMediaExcelLength + "M,如超出请拆分记录分多次上传!";
}
else
{
// string projectId = context.Request["projectId"];
// string username = context.Request["username"];
if ((!Path.GetExtension(myFile.FileName).Contains("xls") && !Path.GetExtension(myFile.FileName).Contains("xlsx")))
{
functionBackMessage.IsSuccess = false; functionBackMessage.Message = "请上传Excel格式文件!";
return Json(functionBackMessage, "application/json");
}
//文件保存
string uploadPath = HttpContext.Current.Server.MapPath("/tempfile") + "\\";//服务器临时路径(不含文件名和后缀)
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string fileName = DateTime.Now.Ticks + "_" + myFile.FileName;
string fileFull = uploadPath + fileName;//文件路径,包含文件名和后缀 try
{ myFile.SaveAs(fileFull);//保存文件
}
catch (Exception ex)
{
com.log.Loger.Debug("uploadMediaSource 保存文件失败", ex);
} }
}
}
else
{
functionBackMessage.IsSuccess = false; functionBackMessage.Message = "没有获取到上传文件";
}
}
return Json(functionBackMessage, "application/json");
}
}

jquery ajax file upload NET MVC 无刷新文件上传的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  3. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  4. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  5. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  6. ie8实现无刷新文件上传

    ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...

  7. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  8. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  9. 基于jQuery Ajax实现无刷新文件上传

    最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadF ...

随机推荐

  1. nginx学习之rewrite

    rewrite 语法学习 什么是rewrite nginx的rewrite主要功是实现URL地址重写.nginx的rewrite规则需要PCRE的支持,既可以通过Perl兼容正则表达式进行规则匹配.n ...

  2. jsp学习第一弹

    早期动态网站开发技术主要使用cgi技术,cgi的基本原理是,将浏览器提交至web服务器的数据通过环境变量传递给其他外部程序,经外部程序处理后,再由cgi把处理结果传送给web服务器,最后由web服务器 ...

  3. WCF服务自我寄宿

    WCF服务的寄宿方式 WCF寄宿方式是一种非常灵活的操作,可以寄宿在各种进程之中,常见的寄宿有: IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为 ...

  4. Activiti就是这么简单

    Activiti介绍 什么是Activiti? Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理.工作流.服务协作等领域的一个开 ...

  5. Linux环境下安装配置Node.js

    1.在官网查看版本,LTS代表长期支持的版本 2.进入服务器 3.输入命令:·wget https://npm.taobao.org/mirrors/node/v8.9.3/node-v8.9.3-l ...

  6. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  7. 13.HashMap TreeMap HashTable LinkedHashMap 的区别

    数据库基本连接equals和hashCode详解 http://www.cnblogs.com/XMMDMW/p/6502355.html

  8. 关于JSP页面URL传值所遇到的小问题

    在JSP页面中我的页面传值加了分号,在后台取值是没有问题的. 但是在XML底层执行时就会返回不了值,这是什么原因呢? 经过努力排查发现了分号导致了${XXX}的值都成了和前面ID一样的串.去掉${XX ...

  9. java各种概念 Core Java总结

    Base: OOA是什么?OOD是什么?OOP是什么?{ oo(object-oriented):基于对象概念,以对象为中心,以类和继承为构造机制,来认识,理解,刻画客观世界和设计,构建相应的软件系统 ...

  10. CentOS7搭建solr7.2

    solr介绍 一.Solr它是一种开放源码的.基于 Lucene Java 的搜索服务器,易于加入到 Web 应用程序中. 二.Solr 提供了层面搜索(就是统计).命中醒目显示并且支持多种输出格式( ...