自定义图片上传

来源：互联网发布：免费语音电话软件编辑：程序博客网时间：2024/06/08 03:06

<div class="form-group" style="height:210px">    <label class="col-sm-3 control-label">营业执照:</label>    <div class="page-container yingyezhizhao">        <div class="file_yingye">            <div class="file_yingye_img" id="localImag">                <img id="preview" src="" width="130" height="176" style="width: 0;height: 0;display: inline-block;" />            </div>        </div>        <div class="file_selectimg" align="center">            <input type="file" name="pic" id="doc" onchange="javascript:setImagePreview();">            <label for="doc">                <input class="file_css" type="button" value="选择图片" style="cursor: pointer" />            </label>            <span class="bg_file">营业执照</span>        </div>        <div class="file_btn_pic">            <button class="register_pic_submit register_pic_up" type="submit" onclick="uploader(this)">上传图片</button>            <button class="register_pic_submit register_pic_success" type="submit" style="display: none">上传成功</button>        </div>        <div class="file_del">            <a href="javascript:void(0)" onclick="deleteImage()">删除 </a>        </div>        <div class="hide_img_data" style="display: none" data-t="">            <img class="hide_img" src="">        </div>    </div></div>

//图片上传<script>    function uploader(ths) {        //上传     var f=document.getElementById("doc").value;        var k=document.getElementById("doc").files[0].size;        var options={            url:"http://192.168.0.113/index.php/account/uploadimg",            type:"post",            dataType:"json",            success:function (data, status, xhr) {                $("#doc").attr("src",data.path);                $(".hide_img").attr("src",data.msg.url);                $(".hide_img_data").attr("data-t",data.status);                if(data.status!==1){                    layer.msg("图片上传失败，请重新选择！");                    deleteImage()                }else if(data.status==1){                    $(".register_pic_up").css("display","none");                    $(".register_pic_success").css("display","block");                    $(".register_pic_success").css("background","#00C853");                    $(".register_pic_success").css("border-color","#00C853");                }            }        };        if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){            layer.msg("图片类型必须是.gif,jpeg,jpg,png中的一种！");            return false        }else if(k>1024*1024*5){            layer.msg("图片不能大于5M！")        }else{            $("#register_form_pic").ajaxSubmit(options)        }    }    //下面用于图片上传预览功能    function setImagePreview(avalue) {        //input        var docObj = document.getElementById("doc");//img        var imgObjPreview = document.getElementById("preview");        //div        var divs = document.getElementById("localImag");        if (docObj.files && docObj.files[0]) {            //火狐下，直接设img属性            imgObjPreview.style.display = 'block';            imgObjPreview.style.width = '130px';            imgObjPreview.style.height = '176px';            //imgObjPreview.src = docObj.files[0].getAsDataURL();            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);        } else {            //IE下，使用滤镜            docObj.select();            var imgSrc = document.selection.createRange().text;            var localImagId = document.getElementById("localImag");            //必须设置初始大小            localImagId.style.width = "130px";            localImagId.style.height = "176px";//            //图片异常的捕捉，防止用户修改后缀来伪造图片            try {                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;            } catch(e) {                alert("您上传的图片格式不正确，请重新选择!");                return false;            }            imgObjPreview.style.display = 'none';            document.selection.empty();        }        return true;    }    function deleteImage(){//        //情况预览图片        $("#preview").attr("src", "");        //移除图片控件输入内容        var file = $("#doc")        file.after(file.clone().val(""));        file.remove();        $(".register_pic_up").css("display","block");        $(".register_pic_success").css("display","none");        //重新设置监听//        setImagePreview();    }</script>

阅读全文

0 0