首页 > 上网技巧 > 电脑小技巧 > 正文

Asp.net mvc4用JQuery插件实现异步上传

时间:2013-03-05 08:35 作者:QQ地带 我要评论

下载异步上传插件AjaxFileUploader,下载地址:http://internetwork.net/DOWNLOAD/


解压,保存在 asp.net mvc项目的一个文件夹下,如下图:


1.         Controller层


 public ActionResult View3()


        {


            return View();


 


        }


        [HttpPost]


        public ActionResult View3(HttpPostedFileBase file)


        {


            if (file == null)


            {


                return Content("没有文件!", "text/plain");


            }


            var fileName = Path.Combine(Request.MapPath("~/UploadFiles"), Path.GetFileName(file.FileName));


            try


            {


                file.SaveAs(fileName);             


                return Content("上传成功!", "text/plain");


            }


            catch


            {


                return Content("上传异常 !", "text/plain");


            }


        }


 


2.         View层:


@{


    Layout = null;


}


 


<!DOCTYPE html>


 


<html>


<head>


    <meta name="viewport" content="width=device-width" />


    <title>View1</title>


    <script src="http://shop.internetwork.net/Scripts/jquery-1.7.1.min.js"></script>


   


    <script src="~/ajaxfileupload/jquery.js"></script>


    <script src="~/ajaxfileupload/ajaxfileupload.js"></script>


    <script type="text/javascript">


        function ajaxFileUploads() {


            $("#loading").ajaxStart(function () {


                $(this).show();


            })//开始上传文件时显示一个图片


               .ajaxComplete(function () {


                   $(this).hide();


               });//文件上传完成将图片隐藏起来


 


            $.ajaxFileUpload({


                url: '/Test/View3',//后台处理的action


                secureuri: false,


                fileElementId: 'file',//上传的控件名


                dataType: 'text',


                success: function (data, status) {


                    $("#mydiv").html( data);


                },


                error: function (data, status, e) {


                    $("#mydiv").html( data + "   " + e);


                }


            })


            return false;


        }


    </script>


</head>


<body>


    <input type="file" id="file" name="file" />


    <img src="../ajaxfileupload/loading.gif" width="20px" height="20px" id="loading" style="display: none;">


    <span id="mydiv" style="color: green;"></span>


    <br />


    <input type="button" value="上传" ajaxFileUploads();">


</body>


</html>


标签:asp.net
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告