自定义图片上传

<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>