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="上传图片" οnclick="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="批量上传图片" οnclick="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());
}

6、效果



  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值