BootStrapfileinput.js文件上傳組件實例代碼

1.首先我們下載好fileinput插件引入插件

目前創新互聯建站已為超過千家的企業提供了網站建設、域名、虛擬主機、網站托管、企業網站設計、網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。我們擁有完善的網絡基礎設施服務，能夠為企業或個人提供域名注冊、虛擬主機、企業郵局、網站加速、數據庫、云主機等網絡基礎服務。

<span ><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> 
<script type="text/javascript" src="fileinput/js/fileinput.js"></script> 
<script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"></script></span>

2.html設置：

<span ><form enctype="multipart/form-data"> 
  <input id="file-file" class="file" type="file" multiple> 
</form></span>

3.初始化設置：

function initFileInput(ctrlName, uploadUrl) { 
      var control = $('#' + ctrlName); 
      control.fileinput({ 
        resizeImage : true, 
        maxImageWidth : 200, 
        maxImageHeight : 200, 
        resizePreference : 'width', 
        language : 'zh', //設置語言 
        uploadUrl : uploadUrl, 
        uploadAsync : true, 
        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后綴 
        showUpload : true, //是否顯示上傳按鈕 
        showCaption : true,//是否顯示標題 
        browseClass : "btn btn-primary", //按鈕樣式 
        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", 
        maxFileCount : 3, 
        msgFilesTooMany : "選擇圖片超過了最大數量", 
        maxFileSize : 2000, 
      }); 
    }; 
   //初始化控件initFileInput(id,uploadurl)控件id，與上傳路徑 
    initFileInput("file-file", "/tqyh/pushMessAction");

注：要想使用控件自帶的upload按鈕，以及上傳進度，必須用form包裹
（當然也可以在初始化的時加入 enctype: 'multipart/form-data',是一樣的）但不用定義action

<strong><form enctype="multipart/form-data"> 
  <input id="file-file" class="file" type="file" multiple> 
</form></strong>

最后通過后臺進行正常的上傳就好了。

BootStrap fileinput.js文件上傳組件實例代碼

有些朋友說我沒寫明白，好吧我把后臺代碼貼出：

servlet：

@Override 
ublic void doPost(HttpServletRequest request,  
       HttpServletResponse response) 
       throws ServletException, java.io.IOException { 
    String path = request.getSession().getServletContext().getRealPath("/headUpload"); 
  UploadMediaService upload=new UploadMediaService(); 
  String headimage=upload.getMeiaName(path, request); 
  request.getSession().setAttribute("headname",headimage ); 
  System.out.println("文件上傳成功"); 
 } 
 @Override 
ublic void doGet(HttpServletRequest request,  
           HttpServletResponse response) 
    throws ServletException, java.io.IOException { 
  doPost( request, response); 
 }

其實后臺不用可以接收，我們通過解析request就能獲取一個或者多個上傳的文件。上面代碼主要核心代碼：

<span >String path = request.getSession().getServletContext().getRealPath("/headUpload"); 
      UploadMediaService upload=new UploadMediaService(); 
      String headimage=upload.getMeiaName(path, request);</span>

<span >UploadMediaService ： 
/** 
   * 上傳媒體文件，存儲在服務端 
   * 
   * @param path 獲取文件需要上傳到的路徑  
   * @param request 客戶端請求 
   * @return 
   */ 
  public static String uploadLocalMedia(String path,HttpServletRequest request){ 
    String filename ="";  
     //獲得磁盤文件條目工廠  
    DiskFileItemFactory factory = new DiskFileItemFactory();  
    //如果沒以下兩行設置的話，上傳大的 文件 會占用 很多內存，  
    //設置暫時存放的 存儲室 , 這個存儲室，可以和 最終存儲文件 的目錄不同  
    /** 
     * 原理 它是先存到 暫時存儲室，然后在真正寫到 對應目錄的硬盤上，  
     * 按理來說 當上傳一個文件時，其實是上傳了兩份，第一個是以 .tem 格式的  
     * 然后再將其真正寫到 對應目錄的硬盤上 
     */  
    factory.setRepository(new File(path));  
    //設置 緩存的大小，當上傳文件的容量超過該緩存時，直接放到 暫時存儲室  
    factory.setSizeThreshold(1024*1024) ;  
    //高水平的API文件上傳處理  
    ServletFileUpload upload = new ServletFileUpload(factory);  
    try {  
      //可以上傳多個文件  
      List<FileItem> list = upload.parseRequest(request);  
      for(FileItem item : list) {  
        //如果獲取的 表單信息是普通的 文本 信息  
        if(item.isFormField()) {            
          //獲取用戶具體輸入的字符串 ，名字起得挺好，因為表單提交過來的是 字符串類型的  
          String value = item.getString() ;  
        } else{  
          //對傳入的非 簡單的字符串進行處理 ，比如說二進制的 圖片，視頻這些  
          /** 
           * 以下三步，主要獲取 上傳文件的名字 
           */  
          //獲取路徑名  
          String value = item.getName() ;  
          //索引到最后一個反斜杠  
          int start = value.lastIndexOf("\\");  
          //截取 上傳文件的 字符串名字，加1是 去掉反斜杠，  
          filename = value.substring(start+1);  
          System.out.println("filename="+ filename); 
          //真正寫到磁盤上  
          //它拋出的異常 用exception 捕捉  
          //item.write( new File(path,filename) );//第三方提供的  
          //手動寫的  
          OutputStream out = new FileOutputStream(new File(path,filename));  
          InputStream in = item.getInputStream() ;  
          int length = 0 ;  
          byte [] buf = new byte[1024] ;  
          // in.read(buf) 每次讀到的數據存放在  buf 數組中  
          while( (length = in.read(buf) ) != -1) {  
            //在  buf 數組中 取出數據 寫到 （輸出流）磁盤上  
            out.write(buf, 0, length);   
          }  
          in.close();  
          out.close();  
        }  
      }  
    } catch (FileUploadException e) {  
      log.error("文件上傳異常：",e); 
    } catch (Exception e) {  
      log.error("文件處理IO異常：",e); 
    }  
    return filename ; 
  } 
</span>

以上所述是小編給大家介紹的BootStrap fileinput.js文件上傳組件實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網頁標題：BootStrapfileinput.js文件上傳組件實例代碼
分享URL：http://www.yijiale78.com/article2/jcesic.html

成都網站建設公司_創新互聯，為您提供軟件開發、營銷型網站建設、電子商務、全網營銷推廣、定制開發、App設計

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

BootStrapfileinput.js文件上傳組件實例代碼