关于上传、删除、修改单张图片后台处理逻辑

2019-07-04更新

更新修改原因：

1. 前台界面ui显示不好看
2. 后台处理逻辑混乱，涉及到多张图片处理起来很麻烦，所以修改成通过ajax上传/删除图片。

效果：

上传前：

上传后：

撤销后：

以下是更新的代码：

HTML

• 代码：

<div class="form-group">
  <label for="username" class="col-sm-2 control-label no-padding-right">缩略图      		  </label>
  <div class="col-sm-6">
    <input type="hidden" id="pic" value="" name="pic">
      <!-- 要将父布局的position设置为relative，父布局将无法包裹input -->
      <a href="javascript:void(0);" class="btn btn-palegreen" style="position: relative;margin-right: 10px;" id="xian">
      <!--设置input的position为absolute，使其不按文档流排版，并设置其包裹整个布局 -->
      <!-- 设置opactity为0，使input变透明 -->
      <input type="file" name="pic" accept="image/*" style="opacity: 0;position: absolute">上传图片</a>
      <a href="javascript:void(0);" class="btn btn-magenta" onclick="delimg(this)" style="display: none" id="che">撤销图片</a>
 </div>
</div>

要点： 重点都在注释里了。

参考： HTML实现自定义上传图片按钮并显示图片

JS

• 代码：

     //上传图片
     //对input[type=file]监听
        $("input[name=pic]").on('change',function () {
   
            var e=$(this);
            var file=e[0].files[0];
            var formData=new FormData()