<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title></title> <link href="http://admin.vlcms.com/Public/icon.ico" type="image/x-icon" rel="shortcut icon"> <link rel="stylesheet" type="text/css" href="__CSS__/base.css" media="all"> <link rel="stylesheet" type="text/css" href="__CSS__/common.css" media="all"> <link rel="stylesheet" type="text/css" href="__CSS__/module.css"> <link rel="stylesheet" type="text/css" href="__CSS__/style.css" media="all"> <link rel="stylesheet" type="text/css" href="__CSS__/default_color.css" media="all"> <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script> <script src="__STATIC__/layer/layer.js" type="text/javascript"></script> </head> <style> html { min-width:100%; } body { padding: 0px; } .hide{ display: none !important; } </style> <body> <div id="main" class="main" style="min-height: 342px;margin-top: 20px;padding-left: 50px;"> <table border="0" cellspacing="0" cellpadding="0"> <tr style="padding: 10px;height: 50px;"> <td class="l">文件选择: </td> <td > <input type="file" id="fileinput" name="file" accept="image/*"> </td> <td style="color: #777;font-size: 12px;">仅能添加一张凭证,重复添加将覆盖</td> </tr> </table> <div class="jssearch search_list fl cf"> <div class="input-list"> <div class="sch-btn uploadfile" style="width: 100px;padding: 5px;">确认添加</div> <div id="delVoucher" class="sch-btn hide" style="width: 100px;padding: 5px;background-color: red;">删除凭证</div> </div> </div> <div style="display: block;clear: both;"> <img id="voucher" src="" class="hide" style="width: auto;height: 350px;margin: auto;"> </div> </div> <script> var id = {$id}; $(function(){ $(".uploadfile").on("click",function(){ var acceptedTypes = ['image/png','image/jpeg','image/jpg','image/gif']; var type = document.getElementById('fileinput').files[0].type; if (acceptedTypes.indexOf(type) === -1) { layer.msg("只允许图片格式文件"); return false; } var formData = new FormData(); formData.append("id",id); formData.append("file", document.getElementById("fileinput").files[0]); var index = layer.load(); $.ajax({ url:"{:U('saveVoucher')}", type:"post", data:formData, processData:false, contentType:false, success:function(data){ layer.close(index); if(data.status == 1){ //file_path\ layer.msg("上传成功"); $('#voucher').attr("src",data.file_path).removeClass("hide"); $('#delVoucher').removeClass("hide"); $("#fileinput").val(''); }else{ layer.alert(data.info); } }, error:function(e){ layer.alert("网络错误"); } }); }) $("#delVoucher").on("click",function(){ var index = layer.load(); var formData = new FormData(); formData.append("id",id); $.ajax({ url:"{:U('delVoucher')}", type:"post", data:formData, processData:false, contentType:false, success:function(data){ layer.close(index); if(data.status == 1){ //file_path\ layer.msg("删除成功"); $('#voucher').attr("src",'').addClass("hide"); $('#delVoucher').addClass("hide"); $("#fileinput").val(''); }else{ layer.alert(data.info); } }, error:function(e){ layer.alert("网络错误"); } }); }) }); </script> </body> </html>