首页 > 代码库 > 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