jquery.form 和MVC4做无刷新上传DEMO

HTML:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.form.js"></script>
<script type="text/javascript" src="/Scripts/common.js"></script> <form accept-charset="UTF-8" id="node_form" method="post" action="">
<input size="" class="tino_file" maxlength="" name="pic" id="field-pic" imgstyle=" width=100" type="text" />
<input size="" class="tino_file1" maxlength="" name="pic1" id="field-pic1" imgstyle=" width=100" type="text" />
</form>

JS:

$(document).ready(function(){
$('input.tino_file').each(function(){
var form=$(this).parents("form");
form.attr('enctype','multipart/form-data');
var old_name=$(this).attr('name');
$(this).hide();
var new_name=old_name+'_file';
var imgstyle=$(this).attr('imgstyle');
var imgstr='';
var old_file=$(this).val(); if(''!=old_file)
{
imgstr='<a href="'+old_file+'" target="_blank"><img src="'+old_file+'" '+imgstyle+'></a> <a href="###" onclick="del_pic(\''+old_name+'\')">删除</a>';
}
var str='<input type="file" name="'+new_name+'" id="'+new_name+'" value=""><input type="hidden" id="'+new_name+'_del" value=""><div id="'+new_name+'_show">'+imgstr+'</div>';
$(this).after(str); var ahah=$(this); $('#'+new_name).change(function(){
var tmp=$(this).val();
if(''!=tmp)
{
//alert(ahah.val());
form.ajaxSubmit({
url:"/Home/UploadImage",
type: 'POST',
data:{'field':new_name,'only_img':'yes','old_img':$('#'+new_name+'_del').val()},
dataType: "json",
//beforeSend:function(){loading_start();},
success: function(result) {
if ('' != result.url) {
var tmp = result; $('#' + new_name + '_show').html('<a href="' + tmp.url + '" target="_blank"><img src="' + tmp.realpath + '" ' + imgstyle + '></a> <a href="###" onclick="del_pic(\'' + old_name + '\')">删除</a>');
ahah.val(tmp.url);
$('#' + new_name + '_del').val(tmp.realpath); window.onbeforeunload = function () { }
} else {
alert("请选择正确图片上传");
} }
});
}
}); });

Contoller:

        public JsonResult UploadImage()
{
var relativeurl = "";//相对路径
var realurlpath = "";//绝对路径
if (Request.Files.Count <= )
return Json(new
{
url =relativeurl,
realpath=realurlpath
});
for(var i = ;i < Request.Files.Count;i++)
{
var extensionname = DateTime.Now.ToString("yyyyMMddmmss");
var file = HttpContext.Request.Files[i];
if (file == null || file.ContentLength <= ) continue;
var originExtensionName = EnHtml(HttpUtility.UrlDecode(file.FileName,Encoding.GetEncoding("GB2312"))).Substring(EnHtml(HttpUtility.UrlDecode(file.FileName,Encoding.GetEncoding("GB2312"))).Length - );
if (originExtensionName.ToLower() != "jpg" && originExtensionName.ToLower() != "gif") continue;
var newFile = extensionname + "." + originExtensionName;
relativeurl = newFile;
realurlpath = "/upfile/" + newFile;
file.SaveAs(HttpContext.Server.MapPath("/upfile/" + newFile));
}
return Json(new {
url = relativeurl,
realpath = realurlpath
});
} private static string EnHtml(string str) {
if(str == null)
return "";
str = str.Replace(" ",""); str = str.Trim();
return str;
}

jquery.form 和MVC4做无刷新上传DEMO的更多相关文章

  1. form+iframe+file 页面无刷新上传文件并获取返回值

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  3. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  4. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  5. SpringMVC结合ajaxfileupload.js实现文件无刷新上传

    直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  6. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  7. jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  8. Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传

    先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  9. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

随机推荐

  1. [openssl]openssl特定版本安装

    卸载旧版本 OpenSSL1. apt-get purge openssl2. rm -rf /etc/ssl #删除配置文件编译与安装 OpenSSLprefix 是安装目录,openssldir ...

  2. 临时文件夹迁移 temp位置移动

    方法/步骤 首先,在其他驱动器新建一个文件夹,给临时文件夹安个新家 桌面,右键"我的电脑",选择"属性" 点击"高级系统设置" 点击&quo ...

  3. sqoop 从sqlserver2008 导入数据到hadoop

    今天终于开始上手导入数据到hadoop了,哈哈,过程蛮崎岖的,和官方文档的还不太一样. OK,let's go!试验对象是我第一个名为ST_Statistics的一张表,我要把我表里的数据导入到hdf ...

  4. spring sringboot 加载配置文件 多目录配置文件 多级分类配置文件

    ResourcePatternResolver resolver = new PathMatchingResourcePatternResolver(); Resource[] resources = ...

  5. SpringBoot2 使用@RestController 无法返回一个地址,前台无法渲染为页面,只能返回json数据

    spring boot之访问静态页面 楼主前两天自学spring boot,然后在学习的过程中,出现一个疑问,就是如何去访问静态的html网页,这个问题,楼主上网上搜了下,找到的是在resource目 ...

  6. 从单一WAR到多活, 记述一个创业公司的架构演变

    从单一WAR到多活, 记述一个创业公司的架构演变 本故事纯属虚构,如有雷同,实属巧合 程 是一个爱折腾,喜欢交朋友的程序员. 某一天,程一个朋友介绍了另外一个朋友 创 给他,创说他有个点子,可以改变世 ...

  7. R语言常用基础知识(入门)

    data.frame 动态确定列名称 var <- "mpg" #Doesn't work mtcars$var #These both work, but note tha ...

  8. 第三百六十三节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mget和bulk批量操作

    第三百六十三节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mget和bulk批量操作 注意:前面讲到的各种操作都是一次http请求操作一条数据,如果想 ...

  9. Mac 创建证书(以 创建gdb证书 为例 )

    open /Applications/Utilities/Keychain\ Access.app/ 打开 钥匙串访问 继续继续 创建完毕. Now that we have a certificat ...

  10. Spring JDBC配置数据源

    在本系列教程中,使用的的是MySQL数据库,并创建一个数据库实例:test,在这个数据库实例:test中创建一个表student.如果您使用任何其他数据库,则可以相应地更改DDL和SQL查询,这问题不 ...