1、图片框样式与进度条样式

.alert_img_content { width: 44%; float: left; margin: 3%; border: 1px solid #ddd; background: url(/Content/images/jiahao.png) no-repeat 50%; position: relative; box-sizing: border-box; }
.alert_img_content input { display: block; height: 100%; width: 100%; opacity: 0; position: absolute; top: 0; left: 0; z-index: 2; }
.alert_img_content img { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.alert_img_content a { display: block; text-align: right; padding-right: 7px; padding-top: 2px; font-size: 20px; box-sizing: border-box; border-bottom-left-radius: 100%; height: 40px; width: 40px; background-color: red; color: #fff; /* line-height: 23px; */ position: absolute; top: 0; right: 0; z-index: 3; }
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.progress-bar { background-color: #666; width: 100%; text-align: center; position: relative; height: 20px; line-height: 20px; border-radius: 10px; }
.progress-bar-font { width: 100%; color: #fff; position: absolute; z-index: 3; }
.progress-bar-plan { background-color: red; position: absolute; height: 20px; width: 0%; border-radius: 10px; transition: 0.3s; }

2、图片标签

×

3、进度条标签

4、file绑定的方法

function inputChange(obj)
{
var picList = $(".alert_img_content");

    var pic = picList.eq(picList.length - 1);

    if (pic.find("input").val() != "" && picList.length < 5)  
    {  
        $(".alert\_img\_box").append(html);  
        calcHeight();  
    }

    if ($(obj).val() != "")  
    {  
        $(obj).parent().find("a").show();  
    }

    //设置显示图片  
    function getObjectURL(file)  
    {  
        var url = null;  
        if (window.createObjcectURL != undefined)  
        {  
            url = window.createOjcectURL(file);  
        } else if (window.URL != undefined)  
        {  
            url = window.URL.createObjectURL(file);  
        } else if (window.webkitURL != undefined)  
        {  
            url = window.webkitURL.createObjectURL(file);  
        }  
        return url;  
    }  
    var objURL = getObjectURL(obj.files\[0\]);

    $(obj).parent().find("img").attr("src", objURL);  
}

　　5、删除代码

function deletePic(obj)
{
var len = $(".alert_img_content").length;
var pic = $(".alert_img_content").eq(len - 1);

    $(obj).parent().remove();

    if (len == 5 && pic.find("input").val() != "")  
    {  
        $(".alert\_img\_box").append(html);  
        calcHeight();  
    }  
}

6、保持图片框为正方形的代码

function calcHeight()
{
var obj = $(".alert_img_box .alert_img_content");

    obj.height(obj.width());  
}

7、上传的js代码

function saveDealinfo()
{
$("#btn_save").click(function ()
{
var formData = new FormData();

        if ($("input\[type='file'\]").length > 1)  
        {  
            $(".progress-bar").show();  
            $(".progress-bar-plan").css("background-color", "red");

            $("input\[type='file'\]").each(function (index, item)  
            {  
                formData.append("file", $("input\[type='file'\]")\[index\].files\[0\]);  
            })  
        }

        formData.append("alarmID", "@Model.Item1.AlarmID");  
        formData.append("remark", $("textarea\[name=remark\]").val());  
        formData.append("alarmStatus", $("input\[name=alarmDealStatus\]:checked").val())  
        formData.append("alarmConfirm", $("input\[name=alarmConfim\]:checked").val())

        //首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象  
        var xhrOnProgress = function (fun)  
        {  
            xhrOnProgress.onprogress = fun; //绑定监听  
            //使用闭包实现监听绑  
            return function ()  
            {  
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象  
                var xhr = $.ajaxSettings.xhr();  
                //判断监听函数是否为函数  
                if (typeof xhrOnProgress.onprogress !== 'function')  
                    return xhr;  
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去  
                if (xhrOnProgress.onprogress && xhr.upload)  
                {  
                    xhr.upload.onprogress = xhrOnProgress.onprogress;  
                }  
                return xhr;  
            }  
        }

        $.ajax({  
            url: "/Interface/DealAlarm",  
            type: 'POST',  
            data: formData,  
            // 告诉jQuery不要去处理发送的数据  
            processData: false,  
            // 告诉jQuery不要去设置Content-Type请求头  
            contentType: false,  
            //beforeSend: function ()  
            //{  
            //    console.log("正在进行，请稍候");  
            //},  
            xhr: xhrOnProgress(function (evt)  
            {  
                var percent = Math.floor(evt.loaded / evt.total \* 100);//计算百分比

                $(".progress-bar-plan").css("width", percent + "%");  
                $(".progress-bar-font").html(percent + '%');

                if (percent == 100)  
                {  
                    $(".progress-bar-plan").css("background-color", "#0bae27");  
                }  
                ////console.log(percent);  
                //// 设置进度条样式  
                //$('#jdt').css('width',percent \* 3 + 'px');  
                //$('#jdt').css('background','skyblue');  
                ////显示进度百分比  
                //$('#jdt').text(percent+'%');  
                //$('#loaded').text(evt.loaded/1024 + 'K');  
                //$('#total').text(evt.total/1024 + 'K');  
            }),  
            success: function (response)  
            {  
                if (response.Code == 0)  
                {

                }  
                else  
                {  
                }  
            },  
            error: function (responseStr)  
            {  
                console.log("error");  
            }  
        });  
    })  
}

8、mvc的接收代码

public string DealAlarm()
{
ResponseResult response = new ResponseResult();

        long alarmID = Convert.ToInt64(Request\["alarmID"\]);  
        string remark = Convert.ToString(Request\["remark"\]);  
        int alarmStatus = Convert.ToInt32(Request\["alarmStatus"\]);  
        int alarmConfirm = Convert.ToInt32(Request\["alarmConfirm"\]);

        List<string> urlList = new List<string>();

        IResult iRst = SaveImage(urlList);  

　　　　　　　
　　　　　　　return string.empty;
}

8、图片保存代码

public IResult SaveImage(List urlList)
{
try
{
HttpFileCollectionBase coll = Request.Files;
HttpPostedFileBase file;
string domain = "//" + Request.Url.Host + (Request.Url.Port == ? "" : ":" + Request.Url.Port.ToString()) + "/Content/";

            for (int i = ; i < coll.Count; i++)  
            {  
                file = coll\[i\];

                if (string.IsNullOrEmpty(file.FileName))  
                {  
                    continue;  
                }

                if (file.ContentLength == )  
                {  
                    continue;  
                }

                string pictureName = DateTime.Now.ToString("yyyyMMddHHmmssfff");  
                string extension = Path.GetExtension(file.FileName);  
                string folder = DateTime.Now.ToString("yyyyMM");

                string path = PhotoUrl + "Upload\\\\" + folder + @"\\" + pictureName + extension;

                if (!Directory.Exists(PhotoUrl + folder))  
                {  
                    Directory.CreateDirectory(PhotoUrl + "Upload\\\\" + folder);  
                }

                file.SaveAs(path);

                urlList.Add(domain + folder + @"/" + pictureName + extension);  
            }

            return IResult.Success;  
        }  
        catch (Exception ex)  
        {  
            Logging.Logger.Error(ex);  
            return IResult.UnknownErr;  
        }  
    }