SpringMVC MultipartFile 异步批量上传文件

使用MultipartFile,前端通过异步方式提交,以上传图片做个简例,只介绍前端及处理层代码

需求简述:

1、spring配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="utf-8">
 <property name="maxUploadSize">
  <value>32505856</value>
 </property>
 <property name="maxInMemorySize">
  <value>4096</value>
 </property>
</bean>


2、FTP配置

本机模仿搭建FTP服务,配置简易FTP服务,启动服务


3、FTP操作工具类FileUtils.java,用于处理层调用
package lv.you.util;
import java.io.*;
import java.util.*;
import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPFile;
import org.apache.commons.net.ftp.FTPReply;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
 
public class FileUtils {
 
 private static int offset = 149;
 private static String enCodeStr = "utf-8";
 
 //通过配置文件读取FTP配置
 //暂写死
 private static String ftp_ip = "localhost";//服务IP
 private static int ftp_port = 21;//端口
 private static String ftp_user = "ftp1";//账号
 private static String ftp_password = "123";//密码
 private static String ftp_upload = "/upload";//上传目录
 
 
 /**
  * 把目录下所有文件,上传文件到FTP服务
  * @param hostname 配置主机名称
  * @param path ftp远程文件路径
  * @throws Exception 抛出的异常
  */
 public static int uploadFTPForDir(String hostname,String ftppath,String path)throws Exception {
  int re = 0;
  File file = new File(path);
  if(!file.isDirectory()){
   throw new Exception("找不到目录为:"+path);
  }
  
  FTPClient c = new FTPClient();
  
  int reply;
  try {
   //链接ftp服务
   c.connect(ftp_ip, ftp_port);
   //登陆
   boolean b = c.login(ftp_user,ftp_password);
   if(!b){
    throw new Exception("登陆FTP不成功!");
   }
   reply = c.getReplyCode();
   if(!FTPReply.isPositiveCompletion(reply)){
    c.disconnect();
   }
   c.changeWorkingDirectory(ftppath);
   //上传文件
   File[] f = file.listFiles();
   InputStream input = null;
   int count = 0;
   
   for(int i=0;i<f.length;i++){
    if(!f[i].isFile()||f[i].getName().endsWith(".eh")||f[i].getName().endsWith(".wf")||f[i].getName().endsWith(".txt")){
     c.setFileType(FTP.ASCII_FILE_TYPE);
    }else{
     c.setFileType(FTP.BINARY_FILE_TYPE);
    }
    input = new FileInputStream(f[i]);
    boolean b2 = c.storeFile(encoding(f[i].getName(),enCodeStr,"iso-8859-1"), input);
    input.close();
    count = (b2)?count+1:count;
   }
   c.logout();
   re = f.length-count;
   //判断是否所有文件上传成功
   if(re>0){
    throw new Exception("总共"+f.length+"文件,有"+(re)+"文件上传不成功!");
   }
  } catch (IOException e) {
   throw new Exception("未能连接上Ftp服务器!");
  } finally{
   if(c.isConnected()){
    try{
     c.disconnect();
    }catch(IOException ioe){
     ioe.printStackTrace();
    }
   }
  }
  return re;
 }
 
 /**
  * 文件流生成文件上传到FTP
  * @param file CommonsMultipartFile
  * @param id 生成文件命名
  * @throws Exception 抛出的异常
  */
 public static int uploadFTPForIns(CommonsMultipartFile file, String id)throws Exception {
  int re = 0;
  FTPClient c = new FTPClient();
  int reply;
  try {
   //链接ftp服务
   c.connect(ftp_ip, ftp_port);
   //登陆
   boolean b = c.login(ftp_user,ftp_password);
   if(!b){
    throw new Exception("登陆FTP不成功!");
   }
   reply = c.getReplyCode();
   if(!FTPReply.isPositiveCompletion(reply)){
    c.disconnect();
   }
   c.changeWorkingDirectory(ftp_upload);
   
   if(file.getOriginalFilename().endsWith(".eh")||file.getOriginalFilename().endsWith(".wf")||file.getOriginalFilename().endsWith(".txt")){
    c.setFileType(FTP.ASCII_FILE_TYPE);
   }else{
    c.setFileType(FTP.BINARY_FILE_TYPE);
   }
   InputStream input = file.getInputStream();
   boolean b2 = c.storeFile(encoding(id,enCodeStr,"iso-8859-1"), input);
   input.close();
   c.logout();
  } catch (IOException e) {
   throw new Exception("未能连接上Ftp服务器!");
  } finally{
   if(c.isConnected()){
    try{
     c.disconnect();
    }catch(IOException ioe){
     ioe.printStackTrace();
    }
   }
  }
  return re;
 }
 
 /**
  *
  * @param 根据文件名从FTP读取输出Byte[]
  */
 public static byte[] getFileByte(String fileid)throws Exception{
  
  byte[] bytes = null;
  FTPClient c = new FTPClient();
  int reply;
  try {
   //链接ftp服务
   c.connect(ftp_ip, ftp_port);
   //登陆
   boolean b = c.login(ftp_user,ftp_password);
   if(!b){
    throw new Exception("登陆FTP不成功!");
   }
   reply = c.getReplyCode();
   if(!FTPReply.isPositiveCompletion(reply)){
    c.disconnect();
   }
   c.changeWorkingDirectory(ftp_upload);
   //windows环境下需设置UTF-8编码
   c.setControlEncoding(enCodeStr);
   FTPFile[] fs = c.listFiles();
   for(FTPFile f:fs){
    if(!f.isFile()){
     continue;
    }
    if (f.getName().equals(fileid)){
     InputStream in = null;
                    c.setBufferSize(1024);
                    c.setFileType(c.BINARY_FILE_TYPE);
                    fileid = new String(fileid.getBytes("UTF-8"), "ISO-8859-1");
                    in = c.retrieveFileStream(fileid);
                    bytes = input2byte(in);
                    in.close();
    }
   }
   c.logout();
  } catch (IOException e) {
   throw new Exception("未能连接上Ftp服务器!");
  } finally{
   if(c.isConnected()){
    try{
     c.disconnect();
    }catch(IOException ioe){
     ioe.printStackTrace();
    }
   }
   
  }
  return bytes;
 }
 
 public static byte[] input2byte(InputStream inStream)
         throws IOException{
        ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
        byte[] buff = new byte[100];
        int rc = 0;
        while ((rc = inStream.read(buff, 0, 100)) > 0)
        {
            swapStream.write(buff, 0, rc);
        }
        byte[] in2b = swapStream.toByteArray();
       
        swapStream.close();
       
        return in2b;
    }
 /**
  * 下载文件
  * @param hostname 主机
  * @param ftppath 远程路径
  * @param filter 过滤器
  * @return 返回文件名称
  */
 public static String[] getFTPFileForDir(String hostname,String ftppath,String loaclpath)throws Exception{
  String[] fileName = new String[0];
  
  FTPClient c = new FTPClient();
  int reply;
  try {
   //链接ftp服务
   c.connect(ftp_ip, ftp_port);
   //登陆
   boolean b = c.login(ftp_user,ftp_password);
   if(!b){
    throw new Exception("登陆FTP不成功!");
   }
   reply = c.getReplyCode();
   if(!FTPReply.isPositiveCompletion(reply)){
    c.disconnect();
   }
   c.changeWorkingDirectory(ftppath);
   //windows环境下需设置UTF-8编码
   c.setControlEncoding(enCodeStr);
   FTPFile[] fs = c.listFiles();
   createDir(loaclpath);
   for(FTPFile f:fs){
    if(!f.isFile()){
     continue;
    }
    File f_loc = new File(loaclpath+f.getName());
    OutputStream os = new FileOutputStream(f_loc);
    c.retrieveFile(encoding(f.getName(), enCodeStr, "iso-8859-1"), os);
    os.close();
   }
   c.logout();
  } catch (IOException e) {
   throw new Exception("未能连接上Ftp服务器!");
  } finally{
   if(c.isConnected()){
    try{
     c.disconnect();
    }catch(IOException ioe){
     ioe.printStackTrace();
    }
   }
   
  }
  return fileName;
 }
 
 
 /**
  * 读取FTP文件
  * @param path 文件路径
  * @return 返回文件内容
  */
 public static String readFTPFile(FTPClient c,String fileName){
  String fileCon = "";
  InputStream is = null;
  try {
   is = c.retrieveFileStream(fileName);
   if(is==null){
    return null;
   }
   int len=is.available();
   if(len>0){
    byte[] b = new byte[len];
    is.read(b);
    fileCon = new String(b,"GBK");
   }
  } catch (FileNotFoundException e) {
   e.printStackTrace();
  } catch (IOException e) {
   e.printStackTrace();
  }finally{
   if(is!=null){
    try {
     is.close();
    } catch (IOException e) {
     e.printStackTrace();
    }
   }
  }
  return fileCon;
 }
 /**
  * 重命名FTP文件
  * @param hostname 主机
  * @param ftppath 远程路径
  * @param ftppath 远程路径bak
  * @param fileList 需要重命名的文件
  * @return 返回文件名称
  * @throws Exception
  */
 public static void reNameFTPFile(String hostname,String ftppath,String ftppath_bak,List<String> fileList) throws Exception{
  FTPClient c = new FTPClient();
  int reply;
  try {
   //链接ftp服务
   c.connect(ftp_ip, ftp_port);
   //登陆
   boolean b = c.login(ftp_user,ftp_password);
   if(!b){
    throw new Exception("登陆FTP不成功!");
   }
   reply = c.getReplyCode();
   if(!FTPReply.isPositiveCompletion(reply)){
    c.disconnect();
   }
   c.changeWorkingDirectory(ftppath);
   boolean isC = createFtpDir(c,ftppath_bak);
   if(!isC){
    throw new Exception("备份文件夹["+ftppath_bak+"]创建失败!");
   }
   //把文件移入备份文件夹
   for(String fileName:fileList){
    boolean re_b = c.rename(encoding(fileName, enCodeStr, "iso-8859-1"), encoding(ftppath_bak+fileName, enCodeStr, "iso-8859-1"));
    System.out.println(re_b);
   }
  } catch (IOException e) {
   throw new Exception(e.getMessage());
  } finally{
   if(c.isConnected()){
    try{
     c.disconnect();
    }catch(IOException ioe){
     ioe.printStackTrace();
    }
   }
  }
 }
 private static boolean createFtpDir(FTPClient c, String dir) throws IOException{
  String _dir = c.printWorkingDirectory();
  if(c.changeWorkingDirectory(dir)){
   c.changeWorkingDirectory(_dir);
   return true;
  }else{
   boolean b = c.makeDirectory(dir);
   c.changeWorkingDirectory(_dir);
   return b;
  }
 }
 /**
  * 写文件
  * @param fileCon 文件内容
  * @param path 写入文件的路径
  */
 public static void writhFile(String fileCon,String path){
  //创建路径
  createDir(path);
  //写文件
  File f = new File(path);
  FileOutputStream fos = null;
  try {
   if(!f.isFile()){
    f.createNewFile();
   }
   fos = new FileOutputStream(f);
   byte[] b = fileCon.getBytes("GBK");
   fos.write(b);
  } catch (FileNotFoundException e) {
   e.printStackTrace();
  } catch (IOException e) {
   e.printStackTrace();
  }finally{
   if(fos!=null){
    try {
     fos.close();
    } catch (IOException e) {
     e.printStackTrace();
    }
   }
  }
 }
 /**
  *
  * @param fileCon
  * @param path
  * @param encode
  * 按编码写入文件
  */
 public static void writhFile(String fileCon,String path,String encode ){
  
  if(encode !=null){
   
   //创建路径
   createDir(path);
   //写文件
   File f = new File(path);
   FileOutputStream fos = null;
   try {
    if(!f.isFile()){
     f.createNewFile();
    }
    fos = new FileOutputStream(f);
    byte[] b = fileCon.getBytes(encode);
    fos.write(b);
   } catch (FileNotFoundException e) {
    e.printStackTrace();
   } catch (IOException e) {
    e.printStackTrace();
   }finally{
    if(fos!=null){
     try {
      fos.close();
     } catch (IOException e) {
      e.printStackTrace();
     }
    }
   }
  }else{
   writhFile(fileCon,path);
  }
  
 }
 /**
  * 创建路径,存在时不创建,不存在时创建
  * @param path 路径
  */
 private static void createDir(String path){
  //检验路径是否存在
  String _path = "";
  if(path.endsWith("/")){
   _path=path;
  }else{
   String[] paths = path.split("/");
   
   for(int i=0;i<paths.length-1;i++){
    if(paths[i].length()>0){
     _path = _path + paths[i]+"/";
    }
   }
  }
  File dir = new File(_path);
  if(!dir.isDirectory()){
   dir.mkdirs();
  }
 }
 /**
  * 创建路径,存在时不创建,不存在时创建
  * @param path 路径
  */
 public static boolean delDir(String path){
  File dir = new File(path);
  if(dir.isDirectory()){
   String[] children = dir.list();
   //递归删除目录中的子目录下           
   for (int i=0;i<children.length;i++){               
    boolean b = delDir(path+children[i]);
    if(!b){
     return false;
    }
   }
  }
  return dir.delete();
 }
 /**
  * 获取时间的微秒值,字符串(yyyyMMddHHmmssSSSSSS)
  * @return
  */
 public static String getMicroTime(){
  java.text.SimpleDateFormat f = new java.text.SimpleDateFormat("yyyyMMddHHmmssSSS");
  Date d = new Date();
  String str = f.format(d);
  String sss = str.substring(14);
  int micro = Integer.parseInt(sss)/2+offset;
  offset = offset+3;
  if(offset>500){
   offset = 149;
  }
  return str+""+micro;
 }
 
 
 /**
  * 解析WF文件内容
  * @param fileConEh
  * @return
  */
 public static String[] parseWfFileContent(String fileConWf,String bdName,String[] key){
  String[] value = new String[key.length];
  String bdBegin = "<"+bdName+">";
  String bdEnd = "</"+bdName+">";
  int beginIndex = 0;
  int endIndex = 0;
  //数据头
  beginIndex = fileConWf.indexOf(bdBegin);
  endIndex = fileConWf.indexOf(bdEnd);
  //数据体
  String dataStr = fileConWf.substring(beginIndex+bdBegin.length()+1, endIndex);
  //String[] dataStrs = dataStr.trim().split("[|\\n|\\r]");
  for(int i=0;i<key.length;i++){
   value[i] = getValue(dataStr,key[i]);
  }
  return value;
 }
 /**
  * 获取字符串的<key value/>的value
  * @param context
  * @param key 不包括key
  * @param end 结束索引
  * @return
  */
 private static String getValue(String context,String key){
  String re = "";
  int beginIndex = context.indexOf(key);
  if(beginIndex>=0){
   String temp = context.substring(beginIndex);
   String[] temps = temp.split("[\\n|\\r]+");
   if(temps.length>0){
    re = temps[0].trim().substring(key.length()+1);
   }
  }
  return re.replace("'", "");//去除时间带的点
 }
 /**
  * 编码转换
  * @param obj
  * @param getCode
  * @param setCode
  * @return
  */
 public static String encoding(Object obj,String getCode,String setCode){
  try{
   if(obj==null)
    return "";
   else
    return new String(obj.toString().getBytes(getCode),setCode);
  }catch(Exception e){
   e.printStackTrace();
  }
  return "";
 }
 
 
 /** 
  *  根据路径删除指定的目录或文件,无论存在与否 
  *@param sPath  要删除的目录或文件 
  *@return 删除成功返回 true,否则返回 false。 
  */ 
 public static boolean deleteFolder(String sPath) {  
     boolean flag = false;  
     File file = new File(sPath);  
     // 判断目录或文件是否存在  
     if (!file.exists()) {  // 不存在返回 false  
         return flag;  
     } else {  
         // 判断是否为文件  
         if (file.isFile()) {  // 为文件时调用删除文件方法  
             return deleteFile(sPath);  
         } else {  // 为目录时调用删除目录方法  
             return deleteDirectory(sPath);  
         }  
     }  
 }
 /** 
  * 删除单个文件 
  * @param   sPath    被删除文件的文件名 
  * @return 单个文件删除成功返回true,否则返回false 
  */ 
 public static boolean deleteFile(String sPath) {  
     boolean flag = false;  
     File file = new File(sPath);  
     // 路径为文件且不为空则进行删除  
     if (file.isFile() && file.exists()) {  
         file.delete();  
         flag = true;  
     }  
     return flag;  
 }
 /** 
  * 删除目录(文件夹)以及目录下的文件 
  * @param   sPath 被删除目录的文件路径 
  * @return  目录删除成功返回true,否则返回false 
  */ 
 public static boolean deleteDirectory(String sPath) {  
     //如果sPath不以文件分隔符结尾,自动添加文件分隔符  
     if (!sPath.endsWith(File.separator)) {  
         sPath = sPath + File.separator;  
     }  
     File dirFile = new File(sPath);  
     //如果dir对应的文件不存在,或者不是一个目录,则退出  
     if (!dirFile.exists() || !dirFile.isDirectory()) {  
         return false;  
     }  
     boolean flag = true;  
     //删除文件夹下的所有文件(包括子目录)  
     File[] files = dirFile.listFiles();  
     for (int i = 0; i < files.length; i++) {  
         //删除子文件  
         if (files[i].isFile()) {  
             flag = deleteFile(files[i].getAbsolutePath());  
             if (!flag) break;  
         } //删除子目录  
         else {  
             flag = deleteDirectory(files[i].getAbsolutePath());  
             if (!flag) break;  
         }  
     }  
     if (!flag) return false;  
     //删除当前目录  
     if (dirFile.delete()) {  
         return true;  
     } else {  
         return false;  
     }  
 } 
 
 public static void main(String[] agrs){
  long startTime = System.nanoTime();
  long endTime = System.nanoTime();
  long estimatedTime = endTime - startTime;
  System.out.println(startTime);
  System.out.println(endTime);
  System.out.println(estimatedTime);
 
 
 }
}
4、Controller层处理

package lv.you.controller;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import lv.you.bean.Slide;
import lv.you.service.SlideService;
import lv.you.util.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
 
@Controller
@RequestMapping("slide")
public class SlideController {
 @Resource
 private SlideService slideService;
 
 /**
  * 上传单个图片
  * @param file
  * @param response
  */
 @RequestMapping("file")
 public void addSlide(@RequestParam("file") CommonsMultipartFile file,HttpServletResponse response){
        try {
         
           String id = java.util.UUID.randomUUID().toString();
           FileUtils.uploadFTPForIns(file,id);
          
           Slide slide = new Slide();
           slide.setId(id);
           slide.setFlag("1");
           slide.setImgurl(file.getOriginalFilename());
           slideService.addSlide(slide);
          
           response.getWriter().write(slide.getId());
     response.getWriter().flush();
        } catch (Exception e) {
            e.printStackTrace();
        }
 }
 
 /**
  * 批量上传图片
  * @param files
  * @param response
  */
 @RequestMapping("batchfile")
 public void addBatchSlide(@RequestParam("files") MultipartFile[] files,HttpServletResponse response){
  String ids = "";
  try {
   for(int i = 0;i<files.length;i++){
            String id = java.util.UUID.randomUUID().toString();
            FileUtils.uploadFTPForIns((CommonsMultipartFile)files[i],id);
           
            Slide slide = new Slide();
            slide.setId(id);
            slide.setFlag("1");
            slide.setImgurl(((CommonsMultipartFile)files[i]).getOriginalFilename());
            slideService.addSlide(slide);
           
            ids +=id+",";
   }
   if(ids.contains(",")){
    ids = ids.substring(0, ids.length()-1);
   }
   response.getWriter().write(ids);
   response.getWriter().flush();
  } catch (Exception e) {
            e.printStackTrace();
        }
 }
 /**
  * 根据文件ID获取图片输出流
  * @param request
  * @param response
  * @throws IOException
  */
 @RequestMapping("getfile")
 public void getSlide(HttpServletRequest request,HttpServletResponse response){
  
  response.setHeader("Content-Type","image/jped");//设置响应的媒体类型,这样浏览器会识别出响应的是图片
  String fileid = request.getParameter("fileid");
  try {
   response.getOutputStream().write(FileUtils.getFileByte(fileid));
   response.getOutputStream().flush();
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
}

5、前端
html

<div style="width: 500px;height: auto;margin: 3px 3px 3px 3px;">
 <table class= "gridtable" style="width: 490px;">
  <tr>
   <td align="right" width="100px">单图片上传</td>
   <td>
    1、<input type="file" name="file" id="file">
    <input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="button" value="上传图片" onclick="uploadpic()"></input>
   </td>
  </tr>
  <tr>
   <td align="right">预览</td>
   <td>
    <img class="myimg" style="width: 150px;height: 150px;margin: 4px 4px 4px 4px;"/>
   </td>
  </tr>
 </table>
</div>
 
<div style="width: 500px;height: auto;margin: 3px 3px 3px 3px;">
 <table class= "gridtable" style="width: 490px;">
  <tr>
   <td align="right" width="100px">批量图片上传</td>
   <td>
    1、<input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" name="files" id="files" style="margin-top: 3px;"><span class="img_info1"></span><br/>
    2、<input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" name="files" id="files" style="margin-top: 3px;"><span class="img_info2"></span><br/>
    3、<input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" name="files" id="files" style="margin-top: 3px;"><span class="img_info3"></span><br/>
    4、<input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" name="files" id="files" style="margin-top: 3px;"><span class="img_info4"></span><br/>
        <input type="button" value="批量上传图片" onclick="batchuploadpic()" style="margin-top: 4px;"></input>
   </td>
  </tr>
  <tr>
   <td align="right">预览</td>
   <td>
    <div>
     <table class= "gridtable">
      <tr>
       <td>预览图1</td><td><img class="myimg1" style="width: 80px;height: 50px;margin: 4px 4px 4px 4px;"/></td>
       <td>预览图2</td><td><img class="myimg2" style="width: 80px;height: 50px;margin: 4px 4px 4px 4px;"/></td>
      </tr>
      <tr>
       <td>预览图3</td><td><img class="myimg3" style="width: 80px;height: 50px;margin: 4px 4px 4px 4px;"/></td>
       <td>预览图4</td><td><img class="myimg4" style="width: 80px;height: 50px;margin: 4px 4px 4px 4px;"/></td>
      </tr>
     </table>
    </div>
   </td>
  </tr>
 </table>
</div>


js 操作
相关前端插件:jquery.mloading.js,jquery-1.6.2.min.js

function uploadpic(){
 $("body").mLoading({
  text:"正在上传,请稍后...",//加载文字,默认值:加载中...
  icon:"",//加载图标,默认值:一个小型的base64的gif图片
  html:false,//设置加载内容是否是html格式,默认值是false
  content:"",//忽略icon和text的值,直接在加载框中显示此值
  mask:true//是否显示遮罩效果,默认显示
 });
  var formData = new FormData();
  formData.append("file", document.getElementById("file").files[0]);
  $.ajax({
   contentType:"multipart/form-data",//必须要
   url:"/citys/slide/file.do", 
   type: "POST",
   data: formData,
   contentType: false,
   processData: false,
   success: function (data) {
    showPic(data,".myimg");
    $("body").mLoading("hide");//隐藏loading组件
    alert("上传成功");
   },
   error: function () {
    alert("上传失败");
   }
  });
 
}
 
//多图片上传
function batchuploadpic(){
 $("body").mLoading({
  text:"正在上传,请稍后...",//加载文字,默认值:加载中...
  icon:"",//加载图标,默认值:一个小型的base64的gif图片
  html:false,//设置加载内容是否是html格式,默认值是false
  content:"",//忽略icon和text的值,直接在加载框中显示此值
  mask:true//是否显示遮罩效果,默认显示
 });
  var formData = new FormData();
  var filesObj = document.getElementsByName("files");
  for(var i=0;i<filesObj.length;i++){
   if(filesObj[i].files[0]==null){
    $(".img_info"+(i+1)).html("  *请选择图片");
    $(".img_info"+(i+1)).css({color:"red"});
    $("body").mLoading("hide");//隐藏loading组件
    return;
   }else{
    $(".img_info"+(i+1)).html("");
   }
   formData.append("files", filesObj[i].files[0]);
  }
 
  $.ajax({
   contentType:"multipart/form-data",//必须要
   url:"/citys/slide/batchfile.do", 
   type: "POST",
   data: formData,
   contentType: false,
   processData: false,
   success: function (data) {
    if(data!=""&&data!=null){
     var ids = data.split(",");
     for(var i=0;i<ids.length;i++){
      showPic(ids[i],(".myimg"+(i+1)));
     }
    }
    $("body").mLoading("hide");//隐藏loading组件
    alert("上传成功");
   },
   error: function () {
    alert("上传失败");
   }
  });
 
}
 
//展示头像
function showPic(fileid,img_class){
 $(img_class).attr("src","/citys/slide/getfile.do?fileid="+fileid+"&mas="+Math.random());
}

猜你喜欢

转载自blog.csdn.net/eIoBhMojo/article/details/86690651