以案例驱动的方式分析
需求分析:① 点击“新增”按钮,汇款单图片以上传图片文件和截图 复制粘贴的形式进行上传(可以上传多张图片);
② 点击“修改”按钮汇款单图片可以进行修改。
上传图片:
“进销存”—"请款管理"—“内勤入款”中的汇款单图片的上传。【‘新增’按钮】
1 <td>
<div class="pteh-header" id="caozuo">
<h3 style="width:40%; float:left;">汇款单:</h3>
<div style="width:40%; float:right; text-align:right;">
<input type="button" value="添加图片" class="sous-con" οnclick="addImg()"/>
<input type="hidden" name="addtype" id="addtype"/>
</div>
<div style="clear:both;"></div>
</div>
<div class="pteh-header" id="caozuo2" style="display:none">
<div style="width:40%; float:right; text-align:right;">
<input type="button" value="返回" class="sous-con" οnclick="fanhui()"/>
</div>
<div style="clear:both;"></div>
</div>
</td>
2 <div id="imgvalue" style="display:none"> </div>
<div id="img" style="display:none">
<script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
</div>
3 导入包及其JS:
<!-- 富文本编辑器 -->
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor/lang/zh-cn/zh-cn.js"></script>
然后在<script type="text/javascript"> </script>中写入如下代码:
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
//上传图片
function addImg(){
$("#img").show();
$("#caozuo2").show();
$("#caozuo").hide();
$("#addtype").val(1);
}
function fanhui(){