图片的上传及回显，选择显示

记录一下吧，很久没有做页面了，头大的。。。，这里配合FreeMarker来写的，参考

1. form上添加enctype='multipart/form-data'；

2. 编写上传空间极其回显控件：

   <div class="input-group">
       <span class="input-group-addon">科&nbsp;室&nbsp;图&nbsp;标&nbsp;</span>
       <img id="preview-img" src="${resp.data.iconUrl!''}" width="80" height="80">
       <input type="file" name="icon" id="icon" class="form-control" onchange="selectFile(this)">
   </div>
   <span class="careful" id="errorValue" name="errorValue"></span>
   <br/>
   

3. 编写JS回显

   function selectFile(fileDOM) {
       var file = fileDOM.files[0], // 获取文件
               imageType = /^image\//, // 图片正则表达式
               reader = ''; // 文件读取器
   
       // 文件是否为图片
       if (!imageType.test(file.type)) {
           alert("请选择图片文件！");
           return;
       }
       // 判断是否支持FileReader    
       if (window.FileReader) {
           reader = new FileReader();
       }
       // IE9及以下不支持FileReader
       else {
           alert("您的浏览器不支持图片预览功能，如需该功能请升级您的浏览器！");
           return;
       }
       // 读取完成
       reader.onload = function (event) {
           // 获取图片DOM
           var img = document.getElementById("preview-img");
           // 图片路径设置为读取的图片    
           img.src = event.target.result;
       };
       reader.readAsDataURL(file);
   }
   

4. 编写JS上传

   var formData = new FormData(document.getElementById("updateOffice"));
   formData.append("icon", icon);
   $.ajax({
       type: 'POST',
       url: '${rca.contextPath}/backend/dict/update_office.do',
       data: formData,
       dataType: "json",
       contentType: false,
       processData: false,
       success: function (res) {
           if (res.status == "1") {
               alert("保存成功");
               window.location.href = "${rca.contextPath}/backend/dict/list.do?type=PROFESSOR_OFFICE_ONE";
           } else {
               temp = true;
               $("#errorName").html(res.message);
           }
       }
   });