1. 程式人生 > >使用webuploader一次性上傳多個檔案

使用webuploader一次性上傳多個檔案

先下載webuploader的js包(http://fex.baidu.com/webuploader/download.html)

然後是頁面中是jquery部分

<script type="text/javascript">
$(function(){
/*********************************WebUpload 多檔案上傳 start*****************************************/
var $ = jQuery,
    $list = $('#fileList'),
    // 優化retina, 在retina下這個值是2
    ratio = window.devicePixelRatio || 1,
    // 縮圖大小
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,
    // Web Uploader例項
    uploader;
    // 初始化Web Uploader
    uploader = WebUploader.create({
    // 自動上傳。
    auto: false,
    // swf檔案路徑
    swf:'<%=basePath %>/webuploader/Uploader.swf',
    // 檔案接收服務端。控制層,可以帶引數
    server: 'Int_sharingresourceController/webuploader?empId='+3,
    threads:'30',        //同時執行30個執行緒傳輸
    fileNumLimit:'10',  //檔案總數量只能選擇10個 

    // 選擇檔案的按鈕。可選。
    pick: {id:'#filePicker',  //選擇檔案的按鈕
            multiple:true},   //允許可以同時選擇多個圖片
 // 圖片質量,只有type為`image/jpeg`的時候才有效。
    quality: 100,

    //限制傳輸檔案型別,accept可以不寫 (用於顯示檔案型別篩選)
    /* accept: {
        title: 'Images',//描述
        extensions: 'gif,jpg,jpeg,bmp,png,zip',//型別
        mimeTypes: 'image/*'//mime型別
    } */
});
// 當有檔案新增進來的時候,建立img顯示縮圖使用
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');


    // $list為容器jQuery例項
    $list.append( $li );

    // 建立縮圖
    // 如果為非圖片檔案,可以不用呼叫此方法。
    // thumbnailWidth x thumbnailHeight 為 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能預覽</span>');
            return;
        }

        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});


// 檔案上傳過程中建立進度條實時顯示。    uploadProgress事件:上傳過程中觸發,攜帶上傳進度。 file檔案物件 percentage傳輸進度 Nuber型別
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');

    // 避免重複建立
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
    }

    $percent.css( 'width', percentage * 100 + '%' );
});

// 檔案上傳成功時候觸發,給item新增成功class, 用樣式標記上傳成功。 file:檔案物件,    response:伺服器返回資料
uploader.on( 'uploadSuccess', function( file,response) {
    $( '#'+file.id ).addClass('upload-state-done');
    //console.info(response);
  $("#upInfo").html("<font color='red'>"+response._raw+"</font>");
});


// 檔案上傳失敗                                file:檔案物件 , code:出錯程式碼
uploader.on( 'uploadError', function(file,code) {
    var $li = $( '#'+file.id ),
        $error = $li.find('div.error');

    // 避免重複建立
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }

    $error.text('上傳失敗!');
});


// 不管成功或者失敗,檔案上傳完成時觸發。 file: 檔案物件
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});


//繫結提交事件
$("#btn").click(function() {
    console.log("上傳...");
    uploader.upload();   //執行手動提交
    console.log("上傳成功");
  });
/*********************************WebUpload 多檔案上傳 end*****************************************/
});

然後是HTML部分

<body>
<h3>多檔案上傳</h3>
        <!--dom結構部分-->
    <div id="uploader-demo">
        <!--用來存放item-->
        <div id="fileList" class="uploader-list"></div>
        <div id="upInfo" ></div>
        <div id="filePicker">選擇檔案</div>
        </div>
        <input type="button" id="btn" value="開始上傳">

</body>

這裡不需要使用form表單,需要上傳路徑在jquery部分設定

最後是springMVC的控制層

@RequestMapping("webuploader")
    public void upload(HttpServletRequest request,HttpServletResponse response,MultipartHttpServletRequest Murequest,Integer empId){
System.out.println("開始接受檔案");
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
        Map<String, MultipartFile> files = Murequest.getFileMap();//得到檔案map物件
        String upaloadUrl = request.getSession().getServletContext().getRealPath("/")+"uploader/";//得到當前工程路徑拼接上檔名
        File dir = new File(upaloadUrl);
        if(!dir.exists())//目錄不存在則建立
            dir.mkdirs();
        for(MultipartFile file :files.values()){
            String fileName=file.getOriginalFilename();
            File tagetFile = new File(upaloadUrl+fileName);//建立檔案物件
            if(!tagetFile.exists()){//檔名不存在 則新建檔案,並將檔案複製到新建檔案中
                try {
                    tagetFile.createNewFile();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    file.transferTo(tagetFile);
                } catch (IllegalStateException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        System.out.println("接收完畢");

}

上傳檔案時,頁面可預覽圖片,如果檔案型別不是圖片顯示無法預覽,到這裡,一次簡單的一次性多檔案上傳完成了.

相關推薦

使用webuploader一次性檔案

先下載webuploader的js包(http://fex.baidu.com/webuploader/download.html)然後是頁面中是jquery部分<script type="text/javascript">$(function(){/******

flask 伺服器上面下載檔案 ,客戶端一次性檔案

  #encoding=utf8 import flask,os,sys,time from flask import request,send_from_directory import multiEmbeddings  import tensorflow as tf &n

微信小程式(檔案)

微信小程式上傳(多個檔案上傳) /** * 上傳照片//選擇圖片時限制9張,如需超過9張,同理亦可參照此方法上傳多張照片 */ uploadImg:function(){ var that = this; wx.chooseImage({ count

ajaxfileupload.js 檔案

上傳單個檔案 JS $.ajaxFileUpload({ url :"", secureuri : false, fileElementId : 'img', --傳入file ID data:

input型別檔案(selenium+Python)

一般上傳方法分為兩種:input型別和非input型別,這裡具體分析input型別。 html檔案: 【上傳圖示】按鈕元素定位中包含name=“file”   type="file"  果斷採用input+sendkeys模式。 一、上傳一張圖片,上程式碼: 解釋

vue檔案,附件和其他資料一起給後臺

前端: 實現多圖上傳主要用到以下兩個屬性:        <el-form-item label="附件上傳" label-width="80px">       <el-f

el-upload控制元件一次介面請求檔案

el-upload元件預設情況下上傳多少個檔案就會請求多少次上傳介面,如何一次上傳多個檔案而不必多次請求上傳介面呢?直接看程式碼 html <el-upload :action="actionUrl" :auto-upload="false" :multiple="true" :file-list=

php 在linux 同時檔案時報錯 SplFileObject::__construct(/tmp/phpvfQPvQ):

分析:這個不是上傳檔案的最大值的問題,而是由於linux系統自動清除臨時檔案的願意造成的   thinkphp\library\think\File.php 的建構函式加個判斷 if(file_exists($filename)) 簡單解決報錯可以讓你用起來 不知道有沒有其他其他不

asp.net簡單例項——同時檔案

     之前在網站上看到的一些上傳檔案的功能,感覺還是蠻方便的,這次自己利用asp.net中的HttpFileCollection類做了一個簡單的例子。廢話不多說,下面看操作。     首先,新增一個新的web窗體,在窗體上直接拖拽這幾個控制元件:一個Panel作為容器、

【微信小程式開發筆記】檔案超過10

【小程式筆記】wx.uploadFile(OBJECT) 先說說遇到的問題: 小程式可通過wx.uploadFile(OBJECT)介面上傳手機檔案至伺服器,但是在文件中關於請求中有這麼一段說明: request、uploadFile、down

1次ajax請求(XMLHttpRequest)檔案,支援進度條

封裝了一個ajax多檔案上傳,功能就是選擇多個檔案,用ajax上傳。 呼叫方式也很簡單,寫一個json物件做為引數配置,設定要上傳的服務端url以及選擇檔案和上傳完成等的事件處理函式,new一個AjaxUploadX物件,呼叫selectFiles方法選擇檔案,呼叫upla

Struts檔案與下載詳解 _檔案

     在上一篇中給大家列出的單個檔案的上傳,那麼這一篇咱們講講上傳多個檔案改怎麼作呢?由於過程和上傳單個檔案的類似,所以在這裡不細說,相信大家都能看懂,看不懂的可以在評論區留言,我看到之後會及時

input 框檔案以及檔案校驗

1、如何上傳多個檔案      在input標籤中加入 multiple 屬性,如下 <input type="file" name="file1" id="file1" multiple="multiple"/>        當然,這樣也是一樣的: <

使用FormData檔案

由於專案中使用到,特此寫個Demo html程式碼: <html> <head> <title>Title</title> <s

單個檔案+檔案

單個檔案上傳 jsp頁面 <body> <form action="shangchuan.do" method="post" enctype="multipart/form-data"> 檔案<

input File實現同時檔案

預設的呼叫方式: <input type="file" name="filename"/> 可實現上傳單個檔案,但無法多選確認。 html在input[type='file']中給我們提

asp.net 中一次檔案

看到一篇老外的文章,說在asp.net 中,如何先讓使用者把要上傳的檔案都選好了,然後一次上傳,今小結如下首先在頁面加一個上傳檔案控制元件,一個“attach"按鈕,一個listbox,用來存放等待上傳的檔名,一個"UPLOAD"按鈕,一個”刪除按鈕 <form

關於在一個form表單裡同時檔案和文字資訊的解決方案。。。

執行環境:tomcat5.0.30+springframework步驟:1。定義一個form表單index.jsp和error.jsp**************************************index.jsp************************

HttpClient傳送方實現檔案

public static void upload(String url, List<String> filepaths,HashMap<String, String> mapParams) { HttpClient

使用ajaxfileupload同時檔案

ajaxFileupload這個外掛用於上傳檔案,不過它預設是隻能上傳一個檔案。通過修改其原始碼,可以方便地實現多個檔案上傳。 ajaxFileupload的原理挺簡單的,它將使用者指定(通過ID)的file input新增到form裡面,然後將form提交。我們只需要