.NET easyui+ajaxfileupload图片上传

easyui框架+ajaxfileupload.js+ashx一般处理程序实现

前台：

<link rel="Stylesheet" type="text/css" href="../jquery-easyui-1.5.5/themes/default/easyui.css" />
    <link rel="Stylesheet" type="text/css" href="../jquery-easyui-1.5.5/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../js/ajaxfileupload.js" type="text/javascript"></script>

<table border="1px" title="" bordercolor="#B8D1E2" cellpadding="0" cellspacing="0"
                width="100%" style="height: 300px; margin-bottom: 0px; border-collapse: collapse;">
<tr>
                    <td style="width: 10%; text-align: center">
                        图片预览：
                    </td>
                    <td>
                        <img id="img1" src="" width="214px" height="54px" /><label id="lblSize"></label>
                    </td>
                </tr>
                <tr>
                    <td style="width: 10%; text-align: center">
                        图片标题：
                    </td>
                    <td colspan="3">
                        &nbsp;&nbsp;<input id="file1" name="fileName" />
                        <input type="button" value="上传" /><br />
                    </td>
                </tr>
</table>



<script type="text/javascript">

        $(function () {
            LoadData();

            $(":button").click(function () {

                var fileName = $('#file1').filebox('getValue'); //获取filebox的值
               
                if (fileName == '') {
                    $.messager.alert("上传图片", "请先选择要上传的图片!", "error");
                    return false;
                }
                btnUpload();
            })
        });
        function LoadData() {  //初始化一个filebox控件
            $('#file1').filebox({
                prompt: '选择一张图片', //文本说明文件
                width: '200', //文本宽度
                buttonText: '浏览',  //按钮说明文字
                //accept: 'application/msword'
                onChange: function () { //当文本发生改变的方法，此处用来判断选择的文件是否为图片
                    var fileName = $('#file1').filebox('getValue'); //获取filebox的值

                    var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型

                    var fileContentType = fileName.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用 

                    布尔型变量
                    var isExists = false;
                    //循环判断图片的格式是否正确
                    for (var i in array) {
                        if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                            //图片格式正确之后，根据浏览器的不同设置图片的大小
                            isExists = true;
                            return true;
                        }
                    }
                    if (isExists == false) {
                        $.messager.alert("上传图片", "上传图片类型不正确!", "error");
                        $('#file1').filebox('clear'); //清空里面的值
                        return false;
                    }
                    return false;

                }
            });

        }

        function btnUpload() {  //异步上传图片的方法
            $.ajaxFileUpload({
                url: '../ashx/upload.ashx', //执行上传处理的文件地址
                secureuri: false, //是否加密，一般是false，默认值为false
                fileElementId: 'filebox_file_id_1', //这里 的filebox的id为 filebox_file_id_1而不是fileName
                type: 'post', //请求方式，如果传递额外数据，必须是post
                dataType: 'json', //返回值类型 一般设置为json

                success: function (data, status)  //服务器成功响应处理函数
                {
                    //alert(data.imgurl);
                    $("#img1").attr("src", data.imgurl);
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            //alert(data.msg);
                            $('#lblSize').text(data.msg);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            });
            $('#file1').filebox('clear'); //上传成功后清空里面的值
        }
    </script>

后台：upload.ashx

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //图片名 
            HttpFileCollection files = context.Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;

            string filepath = "~/linkimgs";     //文件路径          
            
            //判断服务器目录是否存在
            if (System.IO.Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(filepath)) == false)//如果不存在就创建file文件夹
            {
                System.IO.Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(filepath));
               
            }

            if (files.Count > 0)
            {
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];
                    if (file.ContentLength > 0)
                    {
                        //全路径 
                        string FullFullName = file.FileName;
                        //获取图片的名称 
                        String fileName = FullFullName.Substring(FullFullName.LastIndexOf("\\") + 1);

                        string path = "~/linkimgs";

                        file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path) + "\\" + fileName);

                        msg = "上传成功! 文件大小为:" + convertFileSize(files[0].ContentLength);
                        imgurl = "../linkimgs/" + file.FileName;
                        string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                        context.Response.Write(res);
                        context.Response.End();
                    }
                }
            }
        }

        public static String convertFileSize(long size)
        {
            long kb = 1024;
            long mb = kb * 1024;
            long gb = mb * 1024;
            if (size >= gb)
            {
                return string.Format("{0:F1} GB", (float)size / gb); 
            }
            else if (size >= mb)
            {
                float f = (float)size / mb;
                return string.Format(f > 100 ? "{0:F1} MB" : "{0:F1} MB", f);                 
            }
            else if (size >= kb)
            {
                float f = (float)size / kb;
                return string.Format(f > 100 ? "{0:F1} KB" : "{0:F1} KB", f); 
            }
            else
                return string.Format("{0:F1} B", size); 
        }

WildCard | 一分钟注册，轻松订阅海外软件服务