<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" οnchange="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" οnclick="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)" οnclick="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>