图片上传JS验证及进度条

小白一枚，上传单张图片记录下

html:

         <tr>
                    <td><b>上传图片：</b></td>
                    <td>
                        <input id="lefile" name="lefile" type="file" style="display:none"/>  
                        <div class="input-append">
                            <a class="btn btn-default" οnclick="$('input[id=lefile]').click();"><i class=" icon-camera"></i> 上传照片</a><br/>
           
                            <label id="photoCover">暂未选择任何图片</label>  <br/>
                          
                        </div>
                    </td>
                   
                </tr>
                 <tr>
                    <td><b>上传进度：</b></td>
                    <td>
                       
                        <div class="input-append">
                      <progress></progress><span id="info"></span><br/> 
                  
                       
                        </div>
                    </td>
                   
                </tr>
               js:

   var file = document.getElementById('lefile');
                        if (file.value == "") {
                            alert("请选择图片！");
                            return false;

                        }

//                        var namestr = file.value.toLowerCase(); //取到文件名称转换成小写
//                        var index = namestr.lastIndexOf(".");         //去最后一个.的索引
//                        var exname = namestr.substring(index + 1);      //以.的索引为界分割字符串 取得文件扩展名
//                        if (exname != "gif" && exname != "jpg" && exname != "png" && exname != "jpeg") {
//                            alert("需要jpg gif png格式的图片,请重新上传！")
//                            file.value = "";
//                        }

                         var files = file.value;
                         var arr2 = files.split('\\'); //注split可以用字符或字符串分割
                        var my = arr2[arr2.length - 1]; //这就是要取得的图片名称
                        var stuff = file.value.match(/^(.*)(\.)(.{1,8})$/)[3];
                        if (stuff != 'png' && stuff != 'PNG' && stuff != 'jpg' && stuff != 'JPG' && stuff != 'gif' && stuff != 'GIF' && stuff != 'bmp' && stuff != 'BMP') {
                            alert('"' + my + '"文件类型不正确，请重新选择！支持jpg、png、gif、bmp四种！');
                            return false;
                        } 
            //判断大小
            var size = file.files[0].size;
            var maxsize = 8 * 1024 * 1024;
            if(size>parseInt(maxsize))
            {
            alert('"'+my+'"图片不能大于8M！');
            return false;
            }

            var formData = new FormData();
            formData.append("lefile", $("#lefile").get(0).files[0]);

  $.ajax({
                url: 'Handler/Test.ashx', //传值给一般处理程序
                type: 'POST',
                async: true,
                //fileElementId: ['lefile'],
                data: formData,

                contentType: false,         // 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                processData: false,
                dataType: 'text',           //这里是返回类型
                clearForm: true,            //提交后是否清空表单数据
                xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) { //检查upload属性是否存在
                        //绑定progress事件的回调函数
                        xhr.upload.addEventListener('progress', progressHandlingFunction, false);
                    }
                    return xhr; //xhr对象返回给jQuery使用
                },
                success: function (data) {   //提交成功后执行的处理函数 data就是服务器返回的数据。

                    switch (data) { //后台验证返回函数
                        case "1":
                            alert("请选择图片！");
                            return false;
                            break;
                        case "2":
                            alert("只能上传JPG，GIF,PNG,JPEG文件");
                            return false;
                            break;
                        case "3":
                            alert("三张照片最大只能传24M");
                            return false;
                            break;
                        case "4":
                            alert("上传失败！");
                            return false;
                            break;
                        case "suss":
                            alert("提交成功!");
                            break;

                    }

                  

                    $("input").val("");//清空文件标签
                },
                error: function (data, status, e) {    //提交失败执行的处理函数。
                  
                    $("input").val("");
                }
            });

        })
        //上传进度回调函数：
        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                $('progress').attr({ value: e.loaded, max: e.total }); //更新数据到进度条
                var percent = e.loaded / e.total * 100;
                $('#info').html(percent.toFixed(2) + "%,"+(e.loaded / 1024 / 1024).toFixed(2) + "/" + (e.total / 1024 / 1024).toFixed(2) + " MB ");
            }
        }

Test.ashx:

 HttpPostedFile _upfile = context.Request.Files["lefile"];

                if (_upfile == null)
                {
                    context.Response.Write("1");
                    return;
                }
                else
                {
                    /*获取文件名： 例：C:\Documents\桌面\123.jpg*/
                    string fileName1 = _upfile.FileName;

                    /*获取后缀名并转为小写*/
                    string suffix1 = fileName1.Substring(fileName1.LastIndexOf(".") + 1).ToLower();

                    //获取文件的字节大小
                    int bytes = _upfile.ContentLength;

                    if (!(suffix1 == "jpg" || suffix1 == "gif" || suffix1 == "png" || suffix1 == "jpeg"))
                    // throw new Exception("只能上传JPG，GIF,PNG,JPEG文件");
                    {
                        context.Response.Write(2);
                        return;
                    }
                    if (bytes > 1024 * 1024 * 24)
                    {
                        // throw new Exception("三张照片最大只能传24M");
                        context.Response.Write(3);
                        return;
                    }
                    string newfileName1 = DateTime.Now.ToString("MMddhhmmss") + "_"+1;

                    string yearMonthStr = DateTime.Now.ToString("yyyyMM");
                    string timeMD = DateTime.Now.ToString("MMdd");

                    string fileDir = HttpContext.Current.Server.MapPath("~/UpFiles/" + yearMonthStr + "/");

                    if (!Directory.Exists(fileDir))
                    {
                        Directory.CreateDirectory(fileDir);
                    }

                    string saveDir1 = fileDir + "_" + newfileName1 + "." + suffix1;

                    _upfile.SaveAs(saveDir1); //保存图片  

                    srcstr = "~/UpFiles/" + yearMonthStr + "/" + "_" + newfileName1 + "." + suffix1; //保存到数据库路径

                      sql语句 insert into file (file)values('"+ srcstr +"');

                }

这里进度条想要好看，可以把上面的样式改成bootstarp的进度条样式

js引用文件