整合 jquery ajaxfileupload 文件异步上传实例

最新推荐文章于 2024-11-20 14:31:50 发布

转载最新推荐文章于 2024-11-20 14:31:50 发布 · 751 阅读

ASP.NET技术同时被 2 个专栏收录

84 篇文章

订阅专栏

JQuery

26 篇文章

订阅专栏

本文介绍了一个使用Ajax进行文件上传的例子，包括前端JavaScript代码和后端处理逻辑。前端使用jQuery插件实现文件选择与上传功能，后端则用ASP.NET处理文件验证及保存。

<strong><span style="font-size:18px;color:#ff0000;">1：前段代码：</span><span style="font-size:14px;">
</span></strong>

<strong><span style="font-size:14px;">   <script src="Scripts/jquery.js"></script>
    <script src="Scripts/ajaxfileupload.js"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            });
        });
        function ajaxFileUpload() {
            $.ajaxFileUpload
            ({
                url: 'Upload.aspx', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'file1', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status) //服务器成功响应处理函数
                {
                    //判断是否有文件路径返回
                    if (typeof (data.error) != 'undefined') {
                        $("#img1").attr("src", data.imgurl);
                    }
                    //判断是否有错误信息
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e) //服务器响应失败处理函数
                {
                    alert(e);
                }
            });
            return false;
        }
    </script></span></strong>

<strong><span style="font-size:14px;">  <p>
            <input type="file" id="file1" name="file" />
        </p>
        <input type="button" value="上传" />
        <p>
            <img id="img1" alt="" src="" />
        </p></span></strong>

2：后台代码：

<strong><span style="font-size:14px;">      //文件大小 1024 kb  
        private const long Size = 1024;
        //文件类型  
        private const string Type = ".jpg|.jpeg|.png|.gif|.bmp";
        //保存名称  
        private const string Name = "";
        //保存路径  
        private const string Path = @"Upload/UserImg";

        protected void Page_Load(object sender, EventArgs e)
        {
            HttpFileCollection files = Request.Files;
            if (files.Count > 0)
            {
                UploadMethod(files);
            }
        }

        /// <summary>  
        /// 上传图片  
        /// </summary>  
        /// <param name="files"></param>  
        public void UploadFile(HttpFileCollection files)
        {
            string msg;
            var error = string.Empty;
            string res;

            //判断上传文件大小  
            long fileSize = files[0].ContentLength;
            if (fileSize <= 0)
            {
                msg = "上传文件错误！";
                res = "{ error:'" + error + "', msg:'" + msg + "'}";
                Response.Write(res);
                Response.End();
                return;
            }
            if (Size * 1024 < fileSize)
            {
                msg = "文件过大,最大限制为" + Size + "KB！";
                res = "{ error:'" + error + "', msg:'" + msg + "'}";
                Response.Write(res);
                Response.End();
                return;
            }
            //通过上传文件的文件名的后缀来判断文件格式  
            var tp = System.IO.Path.GetExtension(files[0].FileName).ToLower();

            if (Type.IndexOf(tp, System.StringComparison.Ordinal) == -1)
            {
                msg = "文件格式错误！";
                res = "{ error:'" + error + "', msg:'" + msg + "'}";
                Response.Write(res);
                Response.End();
                return;
            }
            //上传文件保存路径  
            var path = Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName);

            try
            {
                files[0].SaveAs(path);
                msg = " 上传文件成功! 文件大小为:" + files[0].ContentLength;
                var imgurl = "/" + files[0].FileName;
                res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
            }
            catch (Exception ex)
            {
                error = ex.Message;
                msg = " 上传文件出现异常错误！";
                res = "{ msg:'" + msg + "',error:'" + error + "'}";
            }
            Response.Write(res);
            Response.End();
        }</span></strong>