首页 > 代码库 > jquery.form 和MVC4做无刷新上传DEMO
jquery.form 和MVC4做无刷新上传DEMO
jquery.form 和MVC4做无刷新上传DEMO
HTML:
<script src=http://www.mamicode.com/"~/Scripts/jquery-1.10.2.min.js"></script><script type="text/javascript" src=http://www.mamicode.com/"/Scripts/jquery.form.js"></script><script type="text/javascript" src=http://www.mamicode.com/"/Scripts/common.js"></script> <form accept-charset="UTF-8" id="node_form" method="post" action=""> <input size="30" class="tino_file" maxlength="128" name="pic" id="field-pic" imgstyle=" width=100" type="text" /> <input size="30" class="tino_file1" maxlength="128" 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="http://www.mamicode.com/‘+old_file+‘" target="_blank"><img src="http://www.mamicode.com/‘+old_file+‘" ‘+imgstyle+‘></a> <a href="http://www.mamicode.com/###" 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="http://www.mamicode.com/‘ + tmp.url + ‘" target="_blank"><img src="http://www.mamicode.com/‘ + tmp.realpath + ‘" ‘ + imgstyle + ‘></a> <a href="http://www.mamicode.com/###" 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 <= 0) return Json(new { url =relativeurl, realpath=realurlpath }); for(var i = 0;i < Request.Files.Count;i++) { var extensionname = DateTime.Now.ToString("yyyyMMddmmss"); var file = HttpContext.Request.Files[i]; if (file == null || file.ContentLength <= 0) continue; var originExtensionName = EnHtml(HttpUtility.UrlDecode(file.FileName,Encoding.GetEncoding("GB2312"))).Substring(EnHtml(HttpUtility.UrlDecode(file.FileName,Encoding.GetEncoding("GB2312"))).Length - 3); 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。