前端的文件上传



<div class="hui-form-items hui-form-itemless">
    <div class="hui-form-items-title">图片上传:</div>
   <div class="">
      
      <input id ="shopsImgList" type="hidden" name="shopsImgList" />
       <input id ="imgUrl" type="hidden" name="imgUrl" />
       <input type="file" name="file" id="uploadFile"  multiple="multiple" οnchange="uploadImage();" /></p>
      <p class="help-block">图片预览</p>
     <div class="inner_avatar_preview">
   <div id="squareHeadImg" class="preview_item square">
    
    <img style="width:150px;height:100px"class="square_img" id="imgId" src="" >
   </div>
     </div>
   </div>
     </div>


function uploadImage(){
 
  //判断是否有选择上传文件
    var imgPath = $("#uploadFile").val();
    if (imgPath == "") {
        alert("请选择上传图片!");
        return;
    }
   
    //判断上传文件的后缀名
    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
    if (strExtension != 'jpg' && strExtension != 'gif'
    && strExtension != 'png' && strExtension != 'bmp') {
        alert("请选择图片文件");
        return;
    }
   
    $.ajaxFileUpload({
        url : ctx+'/public/shopsImage',
        secureuri : false,
//            data : data,//需要传递的数据 json格式
        fileElementId :['uploadFile'],
        dataType : 'String',
        success : function(data,status) {
         console.log(data,"数据+++",status);
         debugger
         if(data.state==1){
          console.log(data.data.imgurl);
          var imgUrl=data.data.imgurl;
             $("input[name='shopsImgList']").val($("input[name='shopsImgList']").val()+","+imgUrl);
             console.log("值"+$("input[name='shopsImgList']").val());
             var imgdata=imgUrl;
                   $("input[name='imgUrl']").val(imgdata[0]);
                   $("#imgId").attr("src",ctx+imgdata[0]);
                   alert("图片"+data.data.fileName+"上传成功,可继续选择图片");
         }
        },
        error : function(data) {
        }
    });
   
   
 
};

package com.gdlcsoft.controller;

import java.awt.image.BufferedImage;
import java.awt.image.ColorModel;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;

import javax.imageio.IIOImage;
import javax.imageio.ImageIO;
import javax.imageio.ImageWriteParam;
import javax.imageio.ImageWriter;
import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.gdlcsoft.base.Constants;
import com.gdlcsoft.base.util.CommonConfUtil;
import com.gdlcsoft.base.util.MD5Util;
import com.gdlcsoft.base.util.StringUtil;
import com.gdlcsoft.base.web.BaseController;
import com.gdlcsoft.base.web.response.BaseResponse;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;

@Api(value = "附件上传组件", description = "附件上传组件", tags = "附件上传组件")

@RestController
@RequestMapping("public")
public class ShopsImageUploadController extends BaseController {
 static Logger logger = LoggerFactory.getLogger(ShopsImageUploadController.class);

 @ApiOperation(value = "附件上传组件", notes = "附件上传", httpMethod = "POST")
 @ResponseBody
 @RequestMapping(value = "/shopsImage")
 public BaseResponse imageRecord(
   @ApiParam(value = "文件组件数据", name = "文件组件数组") @RequestParam(value = "file", required = false) MultipartFile[] multipartFile,
   @RequestParam(value = "category", required = false) String category,
   @RequestParam(value = "id", required = false) Long id, HttpServletRequest request) throws IOException {
  try {
   /** 得到图片保存目录的真实路径 **/
   String realPathDir = CommonConfUtil.getInstance().getGlobalParams("ImageFilePath");
   if (StringUtil.isBlank(realPathDir)) {
    realPathDir = Thread.currentThread().getContextClassLoader().getResource("../../").getPath();
   }

   /** 根据真实路径创建目录 **/
   // EntEmployeeInfo entEmployeeInfo =
   // EntEmployeeInfo.findOne(Long.valueOf(id));
   String fileStorePath = Constants.SAVE_APPIMG_FILEPATH;
   // fileStorePath = fileStorePath + category + "/entid_" +
   // entEmployeeInfo.getEnterpriseId();
   if(StringUtil.isBlank(category)){
    category="shopsImg";
    
   }
    fileStorePath = fileStorePath + category ;
    

   logger.info("The image will stored to path {} for category={}, uid={}", fileStorePath, category, id);
   File saveFile = new File(realPathDir + fileStorePath);
   logger.info("文件路径="+saveFile); 
   if (!saveFile.exists()) {
    saveFile.mkdirs();
   }
   Map<String, String> storedMap = new HashMap<String, String>();
   for (MultipartFile item : multipartFile) {
    Map<String, String> temp = storeImage(item, realPathDir, fileStorePath);
    storedMap.putAll(temp);
   }
   if (storedMap.size() > 0) {
    // store the image into db
    // BaseImagesInfo imageInfo = new BaseImagesInfo();
    // imageInfo.setComprePath(storedMap.get("compressimgurl"));
    // imageInfo.setSrcPath(storedMap.get("imgurl"));
    // imageInfo.setCreateId(id);
    // imageInfo.setCreateTime(DateUtil.getCurrentDateTime());
    // // find employee
    // imageInfo.setEnterpriseId(entEmployeeInfo.getEnterpriseId());
    // imageInfo.setStatus(0l);
    // imageInfo.add();
    BaseResponse data = new BaseResponse();
    data.setMsg("上传图片成功");
    data.setData(storedMap);
    return data;
   } else {
    BaseResponse data = new BaseResponse();
    data.setMsg("上传图片发生系统故障");
    return data;
   }
  } catch (Exception e) {
   logger.error("When store the image occur exception.", e);
   BaseResponse data = new BaseResponse();
   data.setMsg("上传图片发生系统故障");
   return data;
  }
 }

 /**
  *
  * @param multipartFile
  * @param realPathDir
  *            物理路径
  * @param storePath
  *            :相对路径
  * @return
  * @throws IOException
  */
 protected Map<String, String> storeImage(MultipartFile multipartFile, String realPathDir, String storePath) {
  String namemm = multipartFile.getOriginalFilename();
  /** 获取文件的后缀 **/
  String suffix = namemm.substring(multipartFile.getOriginalFilename().lastIndexOf("."));
  
  /** 拼成完整的文件保存路径加文件 **/
  String name = null;

  try {
   name = MD5Util.MD5(multipartFile.getBytes()) + suffix;
  } catch (IOException ex) {
   name = System.currentTimeMillis() + suffix;
  }
  
  String fileName = storePath + "/" + name;
  String comprefileName = storePath + "/" + "compre" + name;
  Map<String, String> map = new HashMap<String, String>();
  File file = new File(realPathDir + fileName);
  try {
   if(!file.exists()){
    multipartFile.transferTo(file);
    copyImage(realPathDir + fileName, realPathDir + comprefileName);
    this.compressPic(realPathDir + comprefileName, realPathDir + comprefileName);
   }

   Double scale = getScale(file);
   map.put("imgurl", fileName);
   map.put("fileName",namemm);
   map.put("scale", scale.toString());
   // 缩略图
   map.put("compressimgurl", comprefileName);
  } catch (Exception e) {
   logger.error("Exceptin occur ", e);
  }
  return map;
 }

 public void compressPic(String srcFilePath, String descFilePath) throws IOException {
  File file = null;
  BufferedImage src = null;
  FileOutputStream out = null;
  ImageWriter imgWrier;
  ImageWriteParam imgWriteParams;

  // 指定写图片的方式为 jpg
  imgWrier = ImageIO.getImageWritersByFormatName("jpg").next();
  imgWriteParams = new javax.imageio.plugins.jpeg.JPEGImageWriteParam(null);
  // 要使用压缩,必须指定压缩方式为MODE_EXPLICIT
  imgWriteParams.setCompressionMode(imgWriteParams.MODE_EXPLICIT);
  // 这里指定压缩的程度,参数qality是取值0~1范围内,
  imgWriteParams.setCompressionQuality((float) 0.3);
  imgWriteParams.setProgressiveMode(imgWriteParams.MODE_DISABLED);
  ColorModel colorModel = ImageIO.read(new File(srcFilePath)).getColorModel();// ColorModel.getRGBdefault();
  // 指定压缩时使用的色彩模式
  // imgWriteParams.setDestinationType(new
  // javax.imageio.ImageTypeSpecifier(
  // colorModel, colorModel.createCompatibleSampleModel(16, 16)));
  imgWriteParams.setDestinationType(
    new javax.imageio.ImageTypeSpecifier(colorModel, colorModel.createCompatibleSampleModel(16, 16)));

  try {
   if (isBlank(srcFilePath)) {
   } else {
    file = new File(srcFilePath);
    src = ImageIO.read(file);
    out = new FileOutputStream(descFilePath);

    imgWrier.reset();
    // 必须先指定 out值,才能调用write方法, ImageOutputStream可以通过任何
    // OutputStream构造
    imgWrier.setOutput(ImageIO.createImageOutputStream(out));
    // 调用write方法,就可以向输入流写图片
    imgWrier.write(null, new IIOImage(src, null, null), imgWriteParams);
    out.flush();
    out.close();
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

 public boolean isBlank(String string) {
  if (string == null || string.length() == 0 || string.trim().equals("")) {
  }
  return false;
 }

 public void copyImage(String fileName, String comprefileName) throws IOException {
  // 复制图片
  FileInputStream fi = new FileInputStream(fileName);
  BufferedInputStream in = new BufferedInputStream(fi);

  FileOutputStream fo = new FileOutputStream(comprefileName);
  BufferedOutputStream out = new BufferedOutputStream(fo);

  byte[] buf = new byte[4096];
  int len = in.read(buf);
  while (len != -1) {
   out.write(buf, 0, len);
   len = in.read(buf);
  }
  out.close();
  fo.close();
  in.close();
  fi.close();
 }

 public Double getScale(File file) throws IOException {
  FileInputStream fis = new FileInputStream(file);
  BufferedImage bufferedImg = ImageIO.read(fis);
  int imgWidth = bufferedImg.getWidth();
  int imgHeight = bufferedImg.getHeight();
  Double scale = (imgWidth + 0.0) / imgHeight;
  BigDecimal bg = new BigDecimal(scale);
  scale = bg.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
  return scale;
 }

}


版权声明:本文为yangfan_sh原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。