jquery+bootstrap实现一个拖拽式表单生成预览效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+bootstrap实现一个拖拽式表单生成预览效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> .controlName{ width: 80%; float: left; padding: 5px; border: 1px solid #ededed; margin-bottom: 20px; border-radius: 2px; color: #777; } .interval{ width:96%; margin: 0 2%; padding: 0 2%; background: #ffffff; float: left; /* overflow-y: auto; overflow-x: hidden; */ } .controlImgName{ width: 20px; float: left; height: 20px; overflow: hidden; position: relative; } .controlImgName img{ width: 100%; position: absolute; top: 0; left: 0; } .controlRealName{ float: left; font-size: 14px; } .controlName:hover{ color:#0377ed; cursor: pointer; border: 1px solid #0377ed; } .mainbackground{ } .questionnaireTitle{ text-align: center; font-size: 18px; } .questionnaireSubject{ width:100%; padding: 0px 10px; float: left; position: relative; height: 100%; overflow: auto; } .questionnaireItemHead{ width: 90%; float: left; line-height: 40px; height: 44px; margin-left: 5%; } .questionnaireItemName{ float: left; width: 60%; } .questionnaireItemGroupButton{ float: right; } .questionnaireItemGroupButton button{ margin-left: 5px; } .questionnaireItemContent{ width: 90%; float: left; margin-left: 5%; margin-bottom: 20px; } .checkMargin{ margin-top: 7px; } .selectInputDiv{ display:none; border: 1px solid #ccc; width: 92%; padding: 4px 6px; box-shadow: 1px 1px 0px 0px #ccc; position: absolute; z-index: 10000; background: #fff; overflow:auto; } .selectInputDiv p{ margin-bottom: 0px; padding: 0.5rem 0; } .selectInputDiv p:hover{ background: #0377ed; color:#fff; } .full{ width: 100%; float: left; } .z_photo { padding: 5px; border: 1px dashed #E7E6E6; } .z_file { width: 120px; height: 120px; margin: 0 auto; position: relative; } .add-img{ display: block; width: 120px; height: 120px; } .imgFile{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 100; } .imgExplain{ font-size:12px; color:#888; float:left; } .errerClass { display: none; float: left; font-size: 14px; color: #ff0000; } .message{ float: left; width: 100%; overflow: hidden; position: relative; } .message .input { width: 70%; float: left; } .message .liulan { width: 30%; height: 38px; padding: 4px 6px; background: url(//repo.bfw.wiki/bfwrepo/icon/5d835147aa4b2.png)left center no-repeat; background-size: cover; text-indent: 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 3px; } .message .files { position: absolute; left: 0px; top: 0px; cursor: pointer; filter: Alpha(opacity=0); opacity: 0; display: none; } .fileTips { float: left; } .fileTips p { color: #888!important; font-size: 12px!important; margin: 0px!important; } .questionnaireAttribute{ display: none; width: 96%; margin: 0 2%; padding: 0 2%; float: left; position: relative; } .textRegularCustom{ display: none; } .placeLocationTop{ border-top:1px solid #22aaff; } .placeLocationBottom{ border-bottom:1px solid #22aaff; } .questionnaireItem{ width:100%; } .required{ float:left; color:#f00; } .requiredHiddle{ display: none; } .previewMain{ position: absolute; width: 800px; height: 600px; display: none; margin: 0 auto; border: 1px solid #000; background: #fff; top: 0; left: 0; right: 0; bottom: 0; } .errorMain{ line-height: 40px; height: 40px; overflow: hidden; color: #f00; width: 100%; } .hidMargin{ margin-bottom:0px!important; } .z_fileImgDel{ position: absolute; width: 100%; text-align: center; background: #000; opacity: 0.7; color: #fff; bottom: 0px; z-index: 101; } .messagedel{ position: absolute; z-index: 101; width: 120px; height: 100%; text-align: center; line-height: 38px; background: #000; opacity: 0.5; color: #fff; display: none; right: 30%; } .priviewbtn,.getcode{ background: 000; cursor: pointer; margin: 20px; text-align: center; border: 1px solid grey; } </style> </head> <body style="height: 100%;position: fixed;width: 100%;"> <div id="app"></div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/popper-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script> <script> //-----------------------------------------初始化方法及页面加载方法------------------------------------------- function Initialization(name) { //先清除对应div中的html代码 $(name).empty(); var main = '<div class="container-fluid" style="background:#edededa1;"><div class="row">'; main += leftToolbar(); main += centerMain(); main += rightAttribute(); main += '</div></div><div class="dragControl"></div>'; main += '<div class="previewMain"></div>'; //添加基本的界面布局 $(name).append(main); $(".interval").css("height",document.body.offsetHeight+"px");//初始化高度,跟浏览器可视高度一致 } //左侧工具栏 function leftToolbar() { //<!--左侧工具栏--> var str = '<div class="col-lg-3 mainbackground">'; str += '<div class="interval">'; str += '<p class="questionnaireTitle">工具栏</p><div class="priviewbtn">预览</div><div class="getcode">获取代码</div>'; str += '<div class="row">'; //文本框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="text">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">文本框</div>'; str += '</div></div>'; //多行文本框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="multiple">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">多行文本框</div>'; str += '</div></div>'; //时间框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="date">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">时间框</div>'; str += '</div></div>'; //单选框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="radio">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">单选框</div>'; str += '</div></div>'; //复选框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="checkbox">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">复选框</div>'; str += '</div></div>'; //下拉框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="dropdown">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">下拉框</div>'; str += '</div></div>'; //文本下拉框 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="textdropdown">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">文本下拉框</div>'; str += '</div></div>'; //图片上传 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="img">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">图片上传</div>'; str += '</div></div>'; //文件上传 str += '<div class="col-lg-6">'; str += '<div class="controlName" data-type="file">'; //str += '<div class="controlImgName"><img src="../images/icon_ps.png" alt="图片"></div>'; str += '<div class="controlRealName">文件上传</div>'; str += '</div></div>'; str += '</div></div></div>'; return str; } //中部控件主体 function centerMain() { //<!--中间内容区域--> var str = '<div class="col-lg-6 mainbackground ">'; str += '<div class="interval centerMain">'; str += '<p class="questionnaireTitle tableTitle">新建调查问卷</p>'; //<!--主体部分--> str += '<div class="questionnaireSubject">'; str += '<form class="questionnaireSubjectForm"></form>'; str += '</div></div></div>'; return str; } //右侧属性栏 function rightAttribute() { //<!--右侧属性框--> var str = '<div class="col-lg-3 mainbackground">'; str += '<div class="interval">'; str += '<p class="questionnaireTitle">属性栏</p>'; //<!--文本属性--> str += '<div class="questionnaireAttribute" data-type="text"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>默认值</label> <input type="text" class="form-control textDetailsName"> </div> <div class="form-group"> <label>限制</label> <select class="form-control limitSelect"> <option value="">无</option> <option value="'+numberRegExp+'">数字</option> <option value="'+ letterRegExp +'">字母</option> <option value="'+chineseRegExp+'">中文</option> <option value="'+emailRegExp+'">邮箱</option> <option value="'+mobileRegExp+'">手机号</option> <option value="'+idRegExp+'">身份证</option> <option value="auto">自定义</option> </select> <input type="text" class="form-control textRegularCustom" name="" placeholder="请输入正则表达式"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--多行文本属性--> str += '<div class="questionnaireAttribute" data-type="multiple"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>默认值</label> <input type="text" class="form-control textDetailsName"> </div> <div class="form-group"> <label>高度</label> <input type="number" class="form-control multipleHeight"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--时间属性--> str += '<div class="questionnaireAttribute" data-type="date"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>默认值</label> <input type="date" class="form-control textDetailsName"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--单选属性--> str += '<div class="questionnaireAttribute" data-type="radio"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>单选框选项(一行一个选项)</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--复选属性--> str += '<div class="questionnaireAttribute" data-type="checkbox"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>复选框选项(一行一个选项)</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--下拉框属性--> str += '<div class="questionnaireAttribute" data-type="dropdown"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>下拉框选项(一行一个选项)</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--文本下拉框属性--> str += '<div class="questionnaireAttribute" data-type="textdropdown"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>文本下拉框选项(一行一个选项)</label> <textarea class="form-control selectAttr" rows="5"></textarea> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; //<!--图片框属性--> str += '<div class="questionnaireAttribute" data-type="img"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>上传数量</label> <input type="number" class="form-control uploadNum"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div> '; //<!--文件框属性--> str += '<div class="questionnaireAttribute" data-type="file"> <div class="form-group"> <label>控件名称</label> <input type="text" class="form-control controlAttributeName"> </div> <div class="form-group"> <label>上传数量</label> <input type="number" class="form-control uploadNum"> </div> <div class="form-group"> <label>此题</label> <div class="row"> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="0" > 必填 </label> </div> </div> <div class="col-lg-6"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="ChoiceRadio" value="1"> 选填 </label> </div> </div> </div> </div> </div>'; str += '</div></div>'; return str; } //-----------------------------------------中部控件的显示方法------------------------------------------- //文本框 function getText() { var str = '<!--具体的表单控件 文本框-->'; str += '<div class="row"><div class="questionnaireItem" data-type="text" data-choice="true" data-limit="" data-limiterror="" >'; //'<!--表单控件的头部-->'; str += '<div class="questionnaireItemHead">'; //'<!--表单控件的名称-->'; str += '<div class="required">*</div><div class="questionnaireItemName">文本框</div>'; //'<!--表单控件的功能按钮-->'; str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //'<!--控件-->'; str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<input type="text" class="form-control formVal">'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //多行文本 function getMultiple() { //<!--具体的表单控件 多行文本框--> var str = '<div class="row"><div class="questionnaireItem" data-type="multiple" data-choice="true" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">多行文本框</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<textarea name="" class="form-control formVal" cols="30" rows="5" style="resize: none;"></textarea>'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //时间框 function getDate() { //<!--具体的表单控件 时间框--> var str = '<div class="row"><div class="questionnaireItem" data-type="date" data-choice="true" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">时间框</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<input type="date" class="form-control formVal" name="" placeholder="">'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //单选框 function getRadio() { //<!--具体的表单控件 单选框--> var str = '<div class="row"><div class="questionnaireItem" data-type="radio" data-choice="true" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">单选框</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<div class="form-check">'; str += '<label class="form-check-label">'; str += '<input type="radio" class="form-check-input checkMargin" name="selectName" value="选项一">选项一</label></div>'; str += '<div class="form-check">'; str += '<label class="form-check-label">'; str += '<input type="radio" class="form-check-input checkMargin" name="selectName" value="选项二">选项二</label></div>'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //多选框 function getCheckbox() { //<!--具体的表单控件 复选框--> var str = '<div class="row"><div class="questionnaireItem" data-type="checkbox" data-choice="true" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">复选框</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<div class="form-check">'; str += '<label class="form-check-label">'; str += '<input type="checkbox" class="form-check-input checkMargin" name="selectName" value="选项一">选项一</label></div>'; str += '<div class="form-check">'; str += '<label class="form-check-label">'; str += '<input type="checkbox" class="form-check-input checkMargin" name="selectName" value="选项二">选项二</label></div>'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //下拉框 function getDropdown() { //<!--具体的表单控件 下拉框--> var str = '<div class="row"><div class="questionnaireItem" data-type="dropdown" data-choice="true" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">下拉框</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<select class="form-control">'; str += '<option>选项一</option>'; str += '<option>选项二</option>'; str += '<option>选项三</option>'; str += '</select>'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //文本下拉框 function getTextDropdown() { //<!--具体的表单控件 文本下拉框--> var str = '<div class="row"><div class="questionnaireItem" data-type="textdropdown" data-choice="true" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">文本下拉框</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<input type="text" class="form-control selectInput">'; str += '<div class="selectInputDiv" title="下拉菜单">'; str += '<p class="selectInputDivP">选项一</p>'; str += '<p class="selectInputDivP">选项二</p>'; str += '</div>'; str += '</div><div class="errorMain"></div></div></div></div>'; return str; } //图片 function getImg() { //<!--具体的表单控件 图片--> var str = '<div class="row"><div class="questionnaireItem" data-type="img" data-choice="true" data-num="1" >'; //<!--表单控件的头部--> str += '<div class="questionnaireItemHead">'; //<!--表单控件的名称--> str += '<div class="required">*</div><div class="questionnaireItemName">上传图片</div>'; //<!--表单控件的功能按钮--> str += '<div class="questionnaireItemGroupButton">'; str += '<button type="button" class="btn btn-primary controlMove">移动</button>'; str += '<button type="button" class="btn btn-primary controlDelete">删除</button>'; str += '</div></div>'; //<!--控件--> str += '<div class="questionnaireItemContent">'; str += '<div class="form-group hidMargin">'; str += '<div class="img-box full">'; str += '<section class="img-section">'; str += '<div class="z_photo upimg-div clear">'; str += '<section class="z_file fl">'; str += '<div class="z_fileImgDel">删除</div>'; str += '<img src="//repo.bfw.wiki/bfwrepo/icon/5d8353f9e8651.png" class="add-img" />'; str += '<input type="file" name="file" class="file imgFile" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" leipiplugins="imgupload" title="图片上传" />'; str += '</section></div></section>'; str += '<div class="imgExplain">支持jpg、jpeg、png、bmp等图片格式</div>'; str += '<div class="errerClass imgErrer"></div>'; str += '</div>'; str += '</div><div class="err.........完整代码请登录后点击上方下载按钮下载查看
网友评论0