js批量上傳圖片
A. 如何用js腳本在html中批量加入圖片
這個用jQuery實現很簡單的，代碼如下：
for(var i =1;i<=75;i++)
{
$("#divContainer").append("<div> <input type=\"radio\" name=\"face\" /> <img src=\"images/QQ/" + i + ".gif\" />");//divContainer為添加容器div的id
}
B. 我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~
WebUploader項目，符合你的要求。
//文件上傳過程中創建進度條實時顯示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重復創建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上傳成功，給item添加成功class,用樣式標記上傳成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上傳失敗，顯示上傳出錯。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重復創建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上傳失敗');
});
//完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多細節，請查看js源碼。
C. 求js多張圖片上傳，可預覽右上角帶刪除圖標的代碼
可以用dropzone.js試試，官網： http://www.dropzonejs.com/，你看看就知道了。上面有一個demo，你試試
D. js 前端上傳多張圖片
可以用webuploader插件，上傳成功後，服務端返回圖片地址，客戶端<img>顯示圖片
X關閉按鈕這個得自己用css樣式控制，點擊X後，服務端刪除圖片，然後前端移除該X掉的圖片
E. jsp如何實現多圖片一起上傳
能
導包 com.jspsmart.upload.SmartUpload
mySmartUpload.initialize(pageContext);
mySmartUpload.upload();
for(int i=0;i<mySmartUpload.getFiles().getCount();i++){
com.jspsmart.upload.File myFile=mySmartUpload.getFiles().getFiles().getFile(i);
if(!myFile.isMissing()){
myFile.saveAs("c:\\"+myFile.getFileName(),mySmartUpload.SAVE_PHYSICAL);
}
}
基本上就是這意思了！ 全是手寫的，不知道有沒有少寫什麼字母
然後頁面取的FILE 再不會，去查，查了也不會再說
F. 你好，我用webuploader.html5only.min.js實現批量圖片上傳，我該怎麼在action中獲取上傳的那些文件呢
1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容
├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。
// SWF文件，當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除圖片處理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴，npm install。
3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。
2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本
// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
image：圖片
video：音視頻
flash：flash
file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)
因為配置uploader時需要事先准備好dom元素，angular打開模態框是非同步而javaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有載入完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
G. 3-22 怎樣批量上傳圖片怎樣自選擇保存的文件夾
上傳單個圖片自動添加浮水印的並保存到固定目錄的功能基本完成，但這樣是達不到實際應用要求。實際上還要實現批量上傳圖片，還要用戶能選擇加了水印圖片的保存路徑。批量上傳大多的實現思路是按一下添加一條input file域給你輸入多一條圖片源路徑，但BOSS黃想點瀏覽按鈕，然後用滑鼠一拉就框幾個圖片文件一次過添加上傳；而選擇保存路徑就只找到手動填入路徑地址，而沒有按瀏覽再選文件夾的方便控制項。總之用戶要求越使用起來方便，程序員的工作就越復雜麻煩。現正還在找代碼，先實現簡單的，再查查看復雜的那種能不能實現。如果PHP和JS之類的確實沒這樣的功能我也不能憑空變出來啊，這又不是編Windows你地用得爽，我煩死啊~~
H. 用java完成圖片多張批量上傳的功能，還有就是後台的應該怎麼處理上傳的照片。
環境准備
1． 下載並安裝Tomcat（已經有很多關於Tomcat安裝以及使用的文章，在這里不再介紹）；
2． 下載File upload的jar包commons-fileupload-1.0-beta-1.jar,並將該文件拷貝到{$TOMCAT}/common/lib目錄下（其中{$TOMCAT}為Tomcat的安裝目錄）；
3． 由於Fileupload子項目同時要用到另外一個項目commons-Beanutils，所以必須下載Beanutils，並將解壓後的文件commons-beanutils.jar拷貝到{$TOMCAT}/common/lib目錄下。
開發文件上傳頁面
文件上傳的界面如圖1所示。為了增加效率我們設計了三個文件域，同時上傳三個文件。
圖1 文件上傳界面
頁面的HTML代碼如下：
<html>
<head>
<title>文件上傳演示</title>
</head>
<body bgcolor=「#FFFFFF」text=「#000000」 leftmargin=「0」topmargin=「40」marginwidth=「0」 marginheight=「0」>
<center>
<h1>文件上傳演示</h1>
<form name=「uploadform」method=「POST」 action=「save.jsp」ENCTYPE=「multipart/form-data」>
<table border=「1」width=「450」cellpadding=「4」 cellspacing=「2」bordercolor=「#9BD7FF」>
<tr><td width=「100%」colspan=「2」>
文件1：<input name=「file1」size=「40」type=「file」>
</td></tr>
<tr><td width=「100%」colspan=「2」>
文件2：<input name=「file2」size=「40」type=「file」>
</td></tr>
<tr><td width=「100%」colspan=「2」>
文件3：<input name=「file3」size=「40」type=「file」>
</td></tr>
</table>
<br/><br/>
<table>
<tr><td align=「center」><input name=「upload」 type=「submit」value=「開始上傳」/></td></tr>
</table>
</form>
</center>
</body>
</html>
代碼中要特別注意的是黑體處。必須保證表單的ENCTYPE屬性值為multipart/form-data，這樣瀏覽器才能正確執行上傳文件的操作。
處理上傳文件信息
由於本文主要是講述如何使用Commons-fileupload，所以為了便於修改、調試，上傳文件的保存使用一個JSP文件來進行處理。我們將瀏覽器上傳來的所有文件保存在一個指定目錄下並在頁面上顯示所有上傳文件的詳細信息。保存頁面處理結果見圖2所示。
圖2 保存頁面
下面來看看save.jsp的代碼:
<%
/**
* 演示文件上傳的處理
* @author <a href=「mailto:[email protected]」>Winter Lau</a>
* @version $Id: save.jsp,v 1.00 2003/03/01 10:10:15
*/
%>
<%@ page language=「java」contentType=「text/html;charset=GBK」%>
<%@ page import=「java.util.*」%>
<%@ page import=「org.apache.commons.fileupload.*」%>
<html>
<head>
<title>保存上傳文件</title>
</head>
<%
String msg = 「」;
FileUpload fu = new FileUpload();
// 設置允許用戶上傳文件大小,單位:位元組
fu.setSizeMax(10000000);
// maximum size that will be stored in memory?
// 設置最多隻允許在內存中存儲的數據,單位:位元組
fu.setSizeThreshold(4096);
// 設置一旦文件大小超過getSizeThreshold()的值時數據存放在硬碟的目錄
fu.setRepositoryPath(「C:\\TEMP」);
//開始讀取上傳信息
List fileItems = fu.parseRequest(request);
%>
<body bgcolor=「#FFFFFF」text=「#000000」 leftmargin=「0」topmargin=「40」marginwidth=「0」 marginheight=「0」>
<font size=「6」color=「blue」>文件列表：</font>
<center>
<table cellpadding=0 cellspacing=1 border=1 width=「100%」>
<tr>
<td bgcolor=「#008080」>文件名</td>
<td bgcolor=「#008080」>大小</td>
</tr>
<%
// 依次處理每個上傳的文件
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
//忽略其他不是文件域的所有表單信息
if (!item.isFormField()) {
String name = item.getName();
long size = item.getSize();
if((name==null||name.equals(「」)) && size==0)
continue;
%>
<tr>
<td><%=item.getName()%></td>
<td><%=item.getSize()%></td>
</tr>
<%
//保存上傳的文件到指定的目錄
name = name.replace(『:』,『_』);
name = name.replace(『\\』,『_』);
item.write(「F:\\」+ name);
}
}
%>
</table>
<br/><br/>
<a href=「upload.html」>返回上傳頁面</a>
</center>
</body>
</html>
在這個文件中需要注意的是FileUpload對象的一些參數值的意義，如下面代碼所示的三個參數sizeMax、sizeThreshold、repositoryPath：
FileUpload fu = new FileUpload();
// 設置允許用戶上傳文件大小,單位:位元組
fu.setSizeMax(10000000);
// maximum size that will be stored in memory?
// 設置最多隻允許在內存中存儲的數據,單位:位元組
fu.setSizeThreshold(4096);
// 設置一旦文件大小超過getSizeThreshold()的值時數據存放在硬碟的目錄
fu.setRepositoryPath(「C:\\TEMP」);
這3個參數的意義分別為：
SizeMax 用來設置上傳文件大小的最大值，一旦用戶上傳的文件大小超過該值時將會拋出一個FileUploadException異常，提示文件太大；
SizeThreshold 設置內存中緩沖區的大小，一旦文件的大小超過該值的時候，程序會自動將其它數據存放在repositoryPath指定的目錄下作為緩沖。合理設置該參數的值可以保證伺服器穩定高效的運行；
RepositoryPath 指定緩沖區目錄。
使用注意事項
從實際應用的結果來看該模塊能夠穩定高效的工作。其中參數SizeThreshold的值至關重要，設置太大會佔用過多的內存，設置太小會頻繁使用硬碟作為緩沖以致犧牲性能。因此，設置該值時要根據用戶上傳文件大小分布情況來設定。例如大部分文件大小集中在100KB左右，則可以使用100KB作為該參數的值，當然了再大就不合適了。使用commons-fileupload來處理HTTP文件上傳的功能模塊很小，但是值得研究的東西很多。
I. <input type="file">批量上傳圖片時怎麼按照選擇圖片的順序上傳
你確定嗎？
你伺服器端如何處理多張圖片上傳的？用什麼循環？foreach？
用foreach就會出問題，你可以用var_mp($_FILES)來看看結果
要保證順序正確，用下標來獲取上傳的文件