uploadify批量上傳圖檔

該上傳摘自b-jui官網！ 具體效果可以檢視：http://demo.b-jui.com/

該方法能一次選擇多張圖檔，并能預覽圖檔，取消上傳，可以單獨一張張上傳，也可一次全部上傳完成！

這裡是一次全部上傳，要單張上傳得自己改代碼！

引入的js，css改天加上下載下傳路徑，或去b-jui官網下載下傳

1.頁面

<link rel="stylesheet" type="text/css" href="/appdata_manage/public/BJUI/diyUpload/css/webuploader.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css"	href="/appdata_manage/public/BJUI/diyUpload/css/diyUpload.css" target="_blank" rel="external nofollow" >
<script	src="/appdata_manage/public/BJUI/diyUpload/js/webuploader.html5only.min.js"	type="text/javascript"></script>
<script src="/appdata_manage/public/BJUI/diyUpload/js/diyUpload.js"	type="text/javascript"></script>
<script>
function doc_upload_success(file, data) {
        var json = $.parseJSON(data);
        $(this).bjuiajax('ajaxDone', json);
        if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
            $('#doc_pic').val(json.filename);
            $(this).navtab('refresh','');//重新整理圖檔展示
            //關閉目前dialog
            $(this).dialog('close', "operateFile");
           			/*  $('#doc_span_pic').html('已上傳圖檔：<img  src="'+ json.filename +'" width="100%">') */
        }
    }
</script>
<div class="bjui-pageContent">
  	 <div style="font-size:15px;margin-top:20px;" id="doc_pic_up" data-toggle="upload"  data-uploader="/appdata_manage/AgentInfo/publicsaveFile?dnum=${(dnum)!}" 
        data-file-size-limit="1024000000"
        data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
        data-multi="true"
        dragDrop="true"
        multi="true"
        data-on-upload-success="doc_upload_success"
        data-icon="cloud-upload">資料上傳：	</div>
    <input type="hidden" name="doc.pic" value="" id="doc_pic">
</div>
		<div class="bjui-pageFooter">
			<ul style="width:100%;">
				<li><button type="button" class="btn-close">關閉</button></li>
				<li style="float:right;"><div class="buttonActive"><div class="buttonContent"><button type="submit" id="upload" class="btn-blue" >一鍵上傳</button></div></div></li>
			</ul>
		</div>
           

1. 背景用的ssm架構

   （1）controller

@RequestMapping("/publicsaveFile")
	 public @ResponseBody Map uploadPic(HttpServletRequest request,@RequestParam Map<String,String> map) throws Exception{
	 try {
		mes=agentInfoService.uploadPic(request,map);
	 } catch (Exception e) {
		logUtil.error("上傳資料圖檔-------------異常："+e);
	 }
	 return mes;
	}
           

(2) serviceImpl

import java.io.File;
import java.util.ArrayList;
import java.io.FileOutputStream;
import java.io.IOException;
import java.math.BigDecimal;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.ResourceBundle;
import java.util.UUID;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import static com.hfsj.controller.BaseController.*;

    @Override
	@Transactional
	public Map uploadPic(HttpServletRequest request, Map<String, String> map) throws Exception {
		String filesnum=getFilseRandom(map.get("dnum").toString());
        FileOutputStream fos=null;
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String time = sdf.format(new Date());
		Date date = sdf.parse(time);
		String files_postfix="";
		Integer files_size=0;
        try {
            //生成檔案名
	        String filedir="contract";
	        String realpath=this.getRequest().getRealPath("uploadFile")+"/"+filedir+"/"+map.get("dnum").toString();
	        //如沒有建立目錄檔案
	        File newfile=new File(realpath);
	        if(!newfile.exists()){
	        	newfile.mkdirs();	
	        }
	        String filename="";
	        //擷取檔案名
	        CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(new BaseController().getSession().getServletContext());         
			commonsMultipartResolver.setDefaultEncoding("utf-8");         
			if (commonsMultipartResolver.isMultipart(request)) {         
				MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;         
				Iterator<String> iter = multipartRequest.getFileNames();   
				while (iter.hasNext()) {         
					MultipartFile file = multipartRequest.getFile((String) iter.next());         
					if (file != null) {
						files_postfix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
						files_size=(int) file.getSize();
						filename=UUID.randomUUID().toString().replace("-", "")+files_postfix;       
						String path = realpath +"\\"+ filename;  
						path=path.replace("\\", "//");
						File localFile = new File(path);
						if(!localFile.exists()){
							localFile.mkdirs();
						}
						//儲存圖檔
						file.transferTo(localFile);     
					}
				}
			}
		   //儲存資料到資料庫
		    String fullPath=getRequest().getScheme()+"://"+getRequest().getServerName()+":"+getRequest().getServerPort()+getRequest().getContextPath();
		    Filesinfo filesinfo=new Filesinfo();
			filesinfo.setAdmin_id(Integer.parseInt(map.get("dnum").toString()));
		    filesinfo.setFiles_date(date);
		    filesinfo.setFiles_marker(""+map.get("dnum").toString()+",appdataAgentinfoContract,2");
		    filesinfo.setFiles_name(filename);
		    filesinfo.setFiles_postfix(files_postfix.replace(".", ""));
		    filesinfo.setFiles_size(files_size);
		    filesinfo.setFilesnum(filesnum);
		    filesinfo.setRelative_href(fullPath+"/uploadFile/"+filedir+"/"+map.get("dnum").toString()+"/"+filename);
		    filesinfo.setUtterly_href(realpath+"/"+filename);
		    if(!"".equals(filename)){
		    	int flage=filesinfoDao.insert(filesinfo);
			    if(flage>0){
			    	mes.put("statusCode", "200");
			    	mes.put("message", "上傳成功");
			    	mes.put("tabid", "table");
			    	mes.put("dialogid","uploadContractPic");
			    	mes.put("closeCurrent","true");
		        }else{
		        	mes.put("statusCode", "300");
		        	mes.put("message", "上傳失敗");
		        }
		    }else{
		    	mes.put("status", "00");
		    }
		} catch (Exception e) {
			e.printStackTrace();
			mes.put("statusCode", "300");
			mes.put("message", "系統異常失敗");
			throw e;
		}finally{
		//關閉流
			if(null!=fos){
				try {
					fos.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			 }
		}
			return mes;
	}