码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-23 15:31:34      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   java   ar   for   

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="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="+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 <= 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

标签:style   blog   http   color   io   os   java   ar   for   

原文地址:http://www.cnblogs.com/flyfish2012/p/3988025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!