• 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 {
         961px;
        height: 110px;
        padding: 15px 20px 0;
    }
    
    .imgOuter {
        float: left;
        position: relative;
         168px;
        height: 108px;
        border: 1px solid #ccc;
        margin-right: 12px;
    }
    
        .imgOuter p.btnsBox {
            display: none;
            position: absolute;
            left: -1px;
            bottom: 7px;
             142px;
            height: 26px;
            padding: 0 14px;
            z-index: 2;
        }
    
            .imgOuter p.btnsBox a.deleteBtn {
                float: right;
                 68px;
                height: 26px;
                background: url("../Images/z_addImagesBtn_02.gif") 0 bottom no-repeat;
            }
    
            .imgOuter p.btnsBox a.bigImg {
                float: left;
                 68px;
                height: 26px;
                background: url("../Images/z_addImagesBtn_02.gif") no-repeat;
            }
    
        .imgOuter p.mask {
            display: none;
            position: absolute;
            left: -1px;
            top: -1px;
             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;
             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; 160px;
    }
    
    .cccc {
        position: absolute;
        background: #000;
        opacity: 0.5;
         160px;
        height: 90px;
        text-align: center; padding: 40px;
        color: #fff;
    }
    .addImgLayer {
        left: 2px;
        top: -108px;
         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; 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上传图片可以直接上传到接口上没有必要用自己后台做为中转

  • 相关阅读:
    document
    reg() replace
    BOM和DOM的区别
    注册表
    实现移动端通过下拉菜单栏实现pc端的导航栏
    通过ajax获取api,并且通过jquery获取自定义属性
    git的使用
    当盒子不设置width,而设置max-width遇到的问题
    CSS之position
    JavaScript之数组常用的方法
  • 原文地址:https://www.cnblogs.com/ansheng/p/5482246.html
Copyright © 2020-2023  润新知