上传图片|修改上传图片的功能实现

以案例驱动的方式分析

需求分析：① 点击“新增”按钮，汇款单图片以上传图片文件和截图 复制粘贴的形式进行上传（可以上传多张图片）；

  ② 点击“修改”按钮汇款单图片可以进行修改。

上传图片：

“进销存”—"请款管理"—“内勤入款”中的汇款单图片的上传。【‘新增’按钮】

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(){