C#使用ajaxForm进行上传图片

<div class='imgOuter addImgBtn l_canshu' id='ImagePath1' value=''>
  <img src="../Images/AddI.gif" id="imgg" alt="Alternate Text" />
  <form action="@UploadURL" method="post" enctype="multipart/form-data" id="user_head_form11">
    <input type="file" class="bbbb" id="qdctvfile11" name="qdctvfile" onchange="eventStart(this);" />
    <input type="hidden" id="redirectUrl" name="redirectUrl" value="http://@(System.Configuration.ConfigurationManager.AppSettings["UrlHasPort"])/CommonData/Callback" />
    <input type="hidden" id="hidImg1" value="@Model.themePicUrl" />
    <input type="hidden" name="type" value="1" />
  </form>
  <dd class="cccc" id="cccc1" style="display: none">上传中.....</dd>
</div>
.zImagesUploadBox {
    width: 961px;
    height: 110px;
    padding: 15px 20px 0;
}

.imgOuter {
    float: left;
    position: relative;
    width: 168px;
    height: 108px;
    border: 1px solid #ccc;
    margin-right: 12px;
}

    .imgOuter p.btnsBox {
        display: none;
        position: absolute;
        left: -1px;
        bottom: 7px;
        width: 142px;
        height: 26px;
        padding: 0 14px;
        z-index: 2;
    }

        .imgOuter p.btnsBox a.deleteBtn {
            float: right;
            width: 68px;
            height: 26px;
            background: url("../Images/z_addImagesBtn_02.gif") 0 bottom no-repeat;
        }

        .imgOuter p.btnsBox a.bigImg {
            float: left;
            width: 68px;
            height: 26px;
            background: url("../Images/z_addImagesBtn_02.gif") no-repeat;
        }

    .imgOuter p.mask {
        display: none;
        position: absolute;
        left: -1px;
        top: -1px;
        width: 170px;
        height: 110px;
        background: #000;
        opacity: 0.5;
        filter: alpha(opacity=50);
        z-index: 1;
    }

    .imgOuter img {
        display: block;
    }

input {
    outline: none;
}

 .addImgBtn {
        float: left;
        width: 160px;
        height: 90px;
        cursor: pointer;
        opacity: 100; background-size: 100% auto;
    }
 .bbbb{
    cursor: pointer;position: absolute;right: 0;top: 0;opacity: 0;filter:alpha(opacity=0);height: 90px;width: 160px;
}

.cccc {
    position: absolute;
    background: #000;
    opacity: 0.5;
    width: 160px;
    height: 90px;
    text-align: center; padding: 40px;
    color: #fff;
}
.addImgLayer {
    left: 2px;
    top: -108px;
    width: 175px;
    position: relative;
    display: none;
}

em {
    left: 0px;
    top: 5px;
    font-style: normal;
    position: absolute;
    font-size: 14px;
    line-height: 26px;
    padding: 0 0 0 0;
}
.l_canshu div i{ position:absolute; right:5px; top:3px; width:14px; height:14px; background:url(../Scripts/addResource/img/l_InnercloseImg.png) no-repeat; z-index:999; cursor:pointer;}

  

function eventStart(obj) {
        var fileLength = getFileSize(obj);
        if (fileLength < 1.5 * 1024 * 1024) {
            $("#user_head_form11").submit();
        }
        else {
            bootbox.alert({
                size: 'small',
                message: "请上传1.5M以内的图片文件!",
                title: "提示",
                callback: function () {
                }
            })
            return false;
        }
    }
    function getFileSize(obj) {
        var objValue = obj.value;
        if (objValue == "") return;
        var fileLenth = -1;
        try {
            //对于IE判断要上传的文件的大小  
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            fileLenth = parseInt(fso.getFile(objValue).size);
        } catch (e) {
            try {
                //对于非IE获得要上传文件的大小  
                fileLenth = parseInt(obj.files[0].size);
            } catch (e) {
                fileLenth = -1;
            }
        }
        return fileLenth;
    }
   $(document).ready(function () {
        $("#user_head_form11").ajaxForm({
            iframe: true,
            beforeSerialize: function () {
                var filepath = $("#qdctvfile11").val()
                var extStart = filepath.lastIndexOf(".");
                var ext = filepath.substring(extStart, filepath.length).toUpperCase();
                if (ext != ".PNG" && ext != ".JPG") {
                    bootbox.alert({
                        size: 'small',
                        message: "图片仅支持png,jpg格式",
                        title: "提示",
                        callback: function () {
                        }
                    })
                    $("#qdctvfile11").val("");
                    return false;
                }
                //$("#cccc1").show();
                $("#imgg").attr("src", "../Images/11.png");
                $("#hiddenImg").val(1);
            },
            success: function (data) {
                data = JSON.parse(data);
                $("#hiddenImg").val("");
                $("#cccc1").hide();
                if (data.code == "OK") {
                    $("#ImagePath1").attr("value", "1");
                    $("#hidImg1").val(data.originalImgUrl);
                    $("#imgg").attr("src", data.thumpImgUrl);
                    $("#themePicMd5").val(data.md5Abstract);
                }
            }
        });//end ajaxForm
        
    });

  使用ajaxForm上传图片可以直接上传到接口上没有必要用自己后台做为中转

 

posted @ 2016-05-11 16:05  乔安生  阅读(516)  评论(0编辑  收藏  举报