使用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提交。我們只需要