bootstrap多文件預覽上傳

本文轉載自查看原文 2017-03-31 13:59 1603 CSS/ JS/ HTML

效果圖展示：

使用環境：

文件上傳插件：bootstrap-fileinput,文檔地址 http://plugins.krajee.com/file-input#pre-requisites

前段ui框架：bootstrap3

java后端框架：spring + mybatis

准備工作：

下載bootstrap-fileinput資源包放到項目中：http://pan.baidu.com/s/1hsvw3FQ 密碼：c8wh

說明：如果前段ui框架不是bootstrap直接從第二步開始看

1.首先說一下bootstrap的模態框：

一般的打開模態框要在頁面上隱藏一段html代碼然后用$("#Id").modal('show')顯示模態框或者$("#Id").modal('hide')隱藏模態框，本人覺得有點麻煩，沒有easyui這樣的直接用js代碼打開方便，所以我對這個模態框進行了封裝。來實現直接用js打開的效果。原理很簡單就是應以自定義一個jQuery的方法，傳遞一些設置的參數，然后js動態生成html代碼然后將代碼追加到頁面的body后面，然后在調用$("#Id").modal('show')方法來打開模態框。模態框里面的內容是動態的所以就需要一個url地址加載頁面的內容。下面來看js代碼

bootstrap-utils.js

jQuery.extend({
   //模態彈出框
   openModel:function(options){
       var defaults={//設置默認參數
               title:'',//模態框的標題
               width:'100%',//模態框的默認寬度
               height:$(window).height()-130+"px",//模態框的默認高度，默認取瀏覽器的可視高度
               showOkButton:true,//是否顯示確定按鈕
               id:"model_js",//模態框id
               frameId:"modal_iframe",//iframeId
               okButtonContent:"確定",//確定按鈕顯示的內容
               cancelButtonContent:"關閉"//取消按鈕顯示的內容
       }
       var opts = $.extend(defaults,options);
       var str = "";
       str+="<div class='modal fade' id='"+opts.id+"' tabindex='-1' role='basic' aria-hidden='true'>";
       str+="   <div class='modal-dialog'>";
       str+="       <div class='modal-content'>";
       if(opts.title != ""){
           str+="       <div class='modal-header' style='height:30px;'>";
           str+="           <button type='button' class='close' data-dismiss='modal' aria-hidden='true' style='margin-top:-10px;'>x</button>";
           str+="           <h3 class='modal-title' style='margin-top:-10px;'><b>"+opts.title+"</b></h3>";
           str+="       </div>";
       }
       str+="           <div class='modal-body' style='padding:0px;'>";
       str+="           </div>";
       str+="           <div class='modal-footer' style='height:35px;padding:0px;'>";
       if(opts.showOkButton){
           str+="               <button type='button' class='btn btn-primary btn-sm' onclick='"+opts.ok+"();'>"+opts.okButtonContent+"</button>";
       }
       str+="               <button type='button' class='btn btn-default btn-sm' data-dismiss='modal'>"+opts.cancelButtonContent+"</button>";
       str+="           </div>";
       str+="       </div>";
       str+="   </div>";
       str+="</div>";

//如果當前頁面不選在當前id的模態框才追加模態框html

       if($("body").find("#"+opts.id+"").length == 0){
           $("body").append(str);
       }else{
           $("body").find("#"+opts.id+"").remove();
           $("body").append(str);
       }

//如果參數傳遞的寬度或者高度不是px格式的則加上px

var height = (opts.height+"").indexOf("px") >= 0 ? opts.height : opts.height+"px";
var width = (opts.width+"").indexOf("px") >= 0 || (opts.width+"").indexOf("%") >= 0 ? opts.width : opts.width+"px";

//設置頁面iframe的地址

$("#"+opts.id+"").find(".modal-body").html("<iframe name='"+opts.frameId+"' style='width:99%;height:"+height+";border:0px;' scrolling='yes' src='"+opts.url+"'></iframe>");
$("#"+opts.id+"").find(".modal-dialog").css({"width":width,"height":height});

//顯示模態框

$("#"+opts.id+"").modal("show");
}
});

下面來看調用方式：

$.openModel({
   url:'editPhoto.jsp',
   frameId:'roomIframe',
   id:'roomModel',
   width:900,
   ok:'getCropData'//點擊確定按鈕執行的函數
});

2.非bootstrap框架使用

說明：不是用bootstrap框架為了避免樣式沖突，我這里用iframe方式，直接訪問photoUploadInit.jsp

調用方式：<a href="photoUploadInit.jsp">選擇圖片<.a>

上傳初始化頁面：photoUploadInit.jsp

<%@ page language="Java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%

String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

//這里獲取一些業務需要的參數，請自行根據業務進行修改

String serviceId = request.getParameter("serviceId");//業務id
String resourceType = request.getParameter("resourceType");//業務類型，101，頭像，2.圖片
%>
<iframe src="<%=path %>/pages/plugins/photoManage/photoUpload.jsp?serviceId=<%=serviceId %>" style="width:99%;height:100%;border:0px;overflow:hidden;"></iframe>

3.bootstrap框架調用

調用方式：

$("#roomPhotoEdit").click(function(){

$.openModel({
url:'photoUpload.jsp',
frameId:'myFrame',

showOkButton:false,

   id:'myModel',
   width:900,
              ok:'getCropData'//點擊確定按鈕執行的函數
});

});

4.圖片上傳頁面：photoUpload.jsp

<%@page import="com.laiqu.backend.common.util.StringUtils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String serviceId = request.getParameter("serviceId");

String resourceType = request.getParameter("resourceType");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

//獲取sessionId

//根據業務id，業務類型查詢上傳的圖片，並且將圖片顯示到編輯器中

function initData(){
   var str1 = "[",str2 = "[";
   $.ajax({
       type:"post",
       async:false,
       url:"<%=path%>/fileInput/photoManage.do",
       data:{keyPrimary:<%=serviceId%>,opType:1,rType:<%=resourceType%>},
       dataType:"json",
       success:function(data){
           for(var i = 0;i < data.photoInfo.length;i++){
               var ss = "";

//如果是封面的，顯示文字標示

                if(data.photoInfo[i].defaultMiddle == "1"){
                       ss = "<div style='position:absolute;width:50px;height:20px;color:red;font-weight:bold;padding:0;margin:0;line-height:15px;'>封面</div>";
                }
               str1+="\"";

                str1+=""+ss+"<img src='"+data.photoInfo[i].resourcePath+"' class='file-preview-image' title='"+data.photoInfo[i].resourceName+"' alt='"+data.photoInfo[i].resourceName+"' style='width:auto;height:160px;'>";
               str1+="\",";
               str2+="{";
                str2+="    caption: '"+data.photoInfo[i].resourceOriginal+"',";
                str2+="    width: '120px', ";
                str2+="    url: '<%=path%>/fileInput/photoManage.do?opType=3&resourceId="+data.photoInfo[i].resourceId+"',";
                str2+="    key: "+data.photoInfo[i].resourceId+", ";
                str2+="    extra: {id: "+data.photoInfo[i].resourceId+"}";
                str2+="},";
           }
           str1 += "]",str2 += "]";
           $("#file-upload").fileinput('refresh',{
               initialPreview:eval(str1)
                ,initialPreviewConfig: eval(str2)
                ,layoutTemplates :{
                    footer: '<div class="file-thumbnail-footer">\n' +
                    '    <div class="file-caption-name" style="width:{width}">{caption}</div>\n' +
                    '    {actions}\n' +
                    '</div>',
                    actions: '<div class="file-actions">\n' +
                    '    <div class="file-footer-buttons">\n' +
                    '        <a href="javascript:void();" class=\'cover_a\' style="font-size:11px;">設為封面</a> {upload}{delete}' +
                    '    </div>\n' +
                    '    <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +
                    '    <div class="clearfix"></div>\n' +
                    '</div>',
                }
            });
       }
   });
}
$(function(){
   $(".cover_a").live("click",function(){
       var resourceId = $(this).next().attr("data-key");
       $.ajax({
           type:'post',
           url:'<%=path%>/fileInput/photoManage.do',
           data:{opType:4,resourceId:resourceId},
           dataType:'json',
           success:function(data){
               if(data.status == "true"){
                   initData();
               }else{
                   alert("系統錯誤");
               }
           },
           error:function(){
               alert("操作失敗");
           }
       });
   });
})
</script>
</head>
<body style="padding:0px;margin:0px;">
<form enctype="multipart/form-data">
   <input id="file-upload" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="<%=path%>/fileInput/photoManage.do?opType=2&keyPrimary=<%=serviceId%>&rType=<%=resourceType%>" data-preview-file-icon="">
</form>
</body>
</html>

5.后台上傳代碼 PhotoManange.java

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

/**
* 文件上傳工具類
* @author 93908
*
*/
@Controller
@RequestMapping("fileInput")
public class PhotoManange {

   @Autowired
   JdbcTemplate baseDao;

   @RequestMapping("/photoManage")
   @ResponseBody
   public String photoManage(HttpServletRequest request,HttpServletResponse response){
       Map params=ParamUtil.toMap(request);
       HashMap<String,Object> resultMap = new HashMap<String,Object>();
       PrintWriter out = null;
       if("1".equals(String.valueOf(params.get("opType")))){//根據業務id查詢上傳的圖片
           try {
               out = response.getWriter();
               String rType = String.valueOf(params.get("rType"));
               List<Map<String, Object>> resultList;

這里處理根據業務id查詢圖片列表

               */
               resultMap.put("photoInfo", resultList);
           } catch (Exception e) {
               // TODO: handle exception
               e.printStackTrace();
               resultMap.put("status", "false");
               resultMap.put("message", "系統錯誤");
           }finally{
               out.print(JSONObject.fromObject(resultMap));
           }
       }else if("2".equals(String.valueOf(params.get("opType")))){//上傳圖片
           try {
               out = response.getWriter();
               //上傳照片
               CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
                //判斷 request 是否有文件上傳,即多部分請求
                if(multipartResolver.isMultipart(request)){
                    //轉換成多部分request
                    MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
                    //取得request中的所有文件名
                    Iterator<String> iter = multiRequest.getFileNames();
                    while(iter.hasNext()){
                        //記錄上傳過程起始時的時間，用來計算上傳時間
                        int pre = (int) System.currentTimeMillis();
                        //取得上傳文件
                        MultipartFile file = multiRequest.getFile(iter.next());
                        if(file != null){
                            String fileOldName = file.getOriginalFilename();
                            if(fileOldName.trim() !=""){
                                try {
                                   String suffix = fileOldName.substring(fileOldName.lastIndexOf("."));//文件后綴名稱

這里處理圖片上傳並且保存到數據庫，請參考我的博客http://blog.csdn.net/ntotl/article/details/51479953

                                   */
                               } catch (Exception e) {
                                   // TODO Auto-generated catch block
                                   e.printStackTrace();
                                   System.out.println(e.getMessage());
                               }
                            }
                        }
                        //記錄上傳該文件后的時間
                        int finaltime = (int) System.currentTimeMillis();
                        System.out.println(finaltime - pre);
                    }
                }
                resultMap.put("id", StringUtils.isNotBlank(params.get("sessionId")+"") ? String.valueOf(params.get("sessionId")) : "");
              out.print(JSONObject.fromObject(resultMap));
           } catch (IOException e1) {
               // TODO Auto-generated catch block
               e1.printStackTrace();
           }
       }else if("3".equals(String.valueOf(params.get("opType")))){//刪除圖片
       try {
                out = response.getWriter();
              int resourceId = StringUtils.isNotBlank(params.get("resourceId")+"") ? Integer.parseInt(String.valueOf(params.get("resourceId"))) : 0;
              /*

這里處理刪除的操作

               */
              resultMap.put("id", resourceId);
              out.print(JSONObject.fromObject(resultMap));
       } catch (IOException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
       }else if("4".equals(String.valueOf(params.get("opType")))){//設為封面
       try {
                out = response.getWriter();
               int resourceId = StringUtils.isNotBlank(params.get("resourceId")+"") ? Integer.parseInt(String.valueOf(params.get("resourceId"))) : 0;
                 /*

這里處理上傳封面的操作

                */
                 resultMap.put("status", "true");
               }
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
               resultMap.put("status", "false");
        }
         out.print(JSONObject.fromObject(resultMap));
        }
       return null;
   }
}

用到的工具類:StringUtils.java

功能：字符串判空方法，在org.apache.commons.lang.StringUtils在基礎上增加了“null”的判斷

public class StringUtils {
   public static boolean isNotBlank(String str){
       if(
           str == null
           || org.apache.commons.lang.StringUtils.isBlank(str)
           || "null".equals(str)
       ){
           return false;
       }
       return true;
   }
   public static boolean isBlank(String str){
       if(
           str == null
           || org.apache.commons.lang.StringUtils.isBlank(str)
           || "null".equals(str)
       ){
           return true;
       }
       return false;
   }
}

參數處理函數：ParamUtil.java

import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

public class ParamUtil {
   /**
   * 從request中獲得參數Map，並返回可讀的Map
   *
   * @param request
   * @return
   */
   @SuppressWarnings("unchecked")
   public static Map toMap(HttpServletRequest request) {
        // 返回值Map
        Map returnMap = new HashMap();
       try {
           request.setCharacterEncoding("UTF-8");
           // 參數Map
            Map properties = request.getParameterMap();
            Iterator entries = properties.entrySet().iterator();
            Map.Entry entry;
            String name = "";
            String value = "";
            while (entries.hasNext()) {
                entry = (Map.Entry) entries.next();
                name = (String) entry.getKey();
                Object valueObj = entry.getValue();
                if(null == valueObj){
                    value = "";
                }else if(valueObj instanceof String[]){
                    String[] values = (String[])valueObj;
                    for(int i=0;i<values.length;i++){
                        value = values[i] + ",";
                    }
                    value = value.substring(0, value.length()-1);
                }else{
                    value = valueObj.toString();
                }
                returnMap.put(name, value);
            }
       } catch (UnsupportedEncodingException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
        return returnMap;
   }

//獲取map對象指定key的值，可以設置默認值

    public static String nullDeal(Map params, String key, String defaultValue){
       if(params == null || !StringUtil.isNorBlank(params.get(key)+"")){
           return defaultValue;
       }
       return String.valueOf(params.get(key));
   }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 支持多文件上傳，預覽，拖拽，基於bootstrap的上傳插件fileinput 的ajax異步上傳文件上傳-------頭像上傳預覽結合bootstrap fileinput插件和Bootstrap-table表格插件，實現文件上傳、預覽、提交的導入Excel數據操作流程 BootStrap文件上傳控件 bootstrap fileinput 上傳文件 Bootstrap文件上傳組件：bootstrap fileinput bootstrap+fileinput插件實現可預覽上傳照片功能點擊圖片進行文件上傳並預覽 asp.net多文件的上傳、預覽、下載 html5 實現多文件上傳和預覽效果