fileupload多文件上傳
1. 使用FileUpload控制項實現多文件上傳的問題
引用
8
樓
wszhoho
的回復:ListBox控制項,不能獲取本地文件,你只能通過fileupload去做。在客戶端,你也無法通過fileupload獲取到文件路徑,顯示在listbox里。換個思路試試吧。
2. 如何實現多文件上傳
可用多個FileUpload,自己可以寫一些邏輯
用一個按鈕提交,可用foreach取得每個FileUpload,用FileUpload的PostedFile得到每個上傳的文件
3. 用FileUpload控制項怎麼實現多圖片上傳
單存的FileUpload控制項無法實現多圖片上傳!要做成那種多選效果一般現在用 as編寫的flash控制項!效果相當不錯!!你可以在網上找找
4. 如何上傳多個文件
含義 ENCTYPE="multipart/form-data" 說明:
通過 http 協議上傳文件 rfc1867協議概述,jsp 應用舉例,客戶端發送內容構造
1、概述在最初的 http 協議中,沒有上傳文件方面的功能。 rfc1867 (http://www.ietf.org/rfc/rfc1867.txt) 為 http 協議添加了這個功能。客戶端的瀏覽器,如 Microsoft IE, Mozila, Opera 等,按照此規范將用戶指定的文件發送到伺服器。伺服器端的網頁程序,如 php, asp, jsp 等,可以按照此規范,解析出用戶發送來的文件。Microsoft IE, Mozila, Opera 已經支持此協議,在網頁中使用一個特殊的 form 就可以發送文件。絕大部分 http server ,包括 tomcat ,已經支持此協議,可接受發送來的文件。各種網頁程序,如 php, asp, jsp 中,對於上傳文件已經做了很好的封裝。
2、上傳文件的實例:用 servelet 實現(http server 為 tomcat 4.1.24)1. 在一個 html 網頁中,寫一個如下的form :
load multi files :
text field :
用戶可以選擇多個文件,填寫表單其它項,點擊「提交」按鈕後就開始上傳給 http://192.168.29.65/upload_file/UploadFile
這是一個 servelet 程序注意 enctype="multipart/form-data", method=post, type="file" 。根據 rfc1867, 這三個屬性是必須的。multipart/form-data 是新增的編碼類型,以提高二進制文件的傳輸效率。具體的解釋請參閱 rfc18672. 服務端 servelet 的編寫現在第三方的 http upload file 工具庫很多。Jarkata 項目本身就提供了fileupload 包http://jakarta.apache.org/commons/fileupload/ 。
文件上傳、表單項處理、效率問題基本上都考慮到了。在 Struts 中就使用了這個包,不過是用 Struts 的方式另行封裝了一次。這里我們直接使用 fileupload 包。至於Struts 中的用法,請參閱 Struts 相關文檔。這個處理文件上傳的 servelet 主要代碼如下:
public void doPost( HttpServletRequest request, HttpServletResponse response )
{
DiskFileUpload diskFileUpload = new DiskFileUpload(); // 允許文件最大長度
diskFileUpload.setSizeMax( 100*1024*1024 ); // 設置內存緩沖大小
diskFileUpload.setSizeThreshold( 4096 ); // 設置臨時目錄
diskFileUpload.setRepositoryPath( "c:/tmp" );
List fileItems = diskFileUpload.parseRequest( request );
Iterator iter = fileItems.iterator(); for( ; iter.hasNext(); )
{
FileItem fileItem = (FileItem) iter.next();
if( fileItem.isFormField() ) { // 當前是一個表單項
out.println( "form field : " + fileItem.getFieldName() + ", " + fileItem.getString() );
} else {
// 當前是一個上傳的文件
String fileName = fileItem.getName();
fileItem.write( new File("c:/uploads/"+fileName) );
}
}}
為簡略起見,異常處理,文件重命名等細節沒有寫出。3、 客戶端發送內容構造假設接受文件的網頁程序位於 http://192.168.29.65/upload_file/UploadFile.假設我們要發送一個二進制文件、一個文本框表單項、一個密碼框表單項。文件名為 E:\s ,其內容如下:(其中的XXX代表二進制數據,如 01 02 03)abbXXXccc 客戶端應該向 192.168.29.65 發送如下內容:
POST /upload_file/UploadFile HTTP/1.1
Accept: text/plain, */*
Accept-Language: zh-cn
Host: 192.168.29.65:80
Content-Type:multipart/form-data;boundary=---------------------------7d33a816d302b6
User-Agent: Mozilla/4.0 (compatible; OpenOffice.org)
Content-Length: 424
Connection: Keep-Alive -----------------------------7d33a816d302b6
Content-Disposition:form-data;
name="userfile1";
filename="E:\s"Content-Type:
application/octet-stream abbXXXccc
-----------------------------7d33a816d302b6
Content-Disposition: form-data;
name="text1" foo
-----------------------------7d33a816d302b6
Content-Disposition: form-data;
name="password1" bar
-----------------------------7d33a816d302b6--
(上面有一個回車)此內容必須一字不差,包括最後的回車。
注意:Content-Length: 424 這里的424是紅色內容的總長度(包括最後的回車)
注意這一行:Content-Type: multipart/form-data; boundary=---------------------------7d33a816d302b6
根據 rfc1867, multipart/form-data是必須的.---------------------------7d33a816d302b6 是分隔符,分隔多個文件、表單項。
其中33a816d302b6 是即時生成的一個數字,用以確保整個分隔符不會在文件或表單項的內容中出現。前面的 ---------------------------7d 是 IE 特有的標志。
Mozila 為---------------------------71用手工發送這個例子,在上述的 servlet 中檢驗通過。
使用POST發送數據
以POST方式發送數據主要是為了向伺服器發送較大量的客戶端的數據,它不受URL的長度限制。POST請求將數據以URL編碼的形式放在HTTP正文中,欄位形式為fieldname=value,用&分隔每個欄位。注意所有的欄位都被作為字元串處理。實際上我們要做的就是模擬瀏覽器POST一個表單。以下是IE發送一個登陸表單的POST請求:
POST http://127.0.0.1/login.do HTTP/1.0
Accept: image/gif, image/jpeg, image/pjpeg, */*
Accept-Language: en-us,zh-cn;q=0.5
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Content-Length: 28
\r\n
username=admin&password=1234
要在MIDP應用程序中模擬瀏覽器發送這個POST請求,首先設置HttpConnection的請求方式為POST:
hc.setRequestMethod(HttpConnection.POST);
然後構造出HTTP正文:
byte[] data = "username=admin&password=1234".getBytes();
並計算正文長度,填入Content-Type和Content-Length:
hc.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
hc.setRequestProperty("Content-Length", String.valueOf(data.length));
然後打開OutputStream將正文寫入:
OutputStream output = hc.openOutputStream();
output.write(data);
需要注意的是,數據仍需要以URL編碼格式編碼,由於MIDP庫中沒有J2SE中與之對應的URLEncoder類,因此,需要自己動手編寫這個encode()方法,可以參考java.net.URLEncoder.java的源碼。剩下的便是讀取伺服器響應,代碼與GET一致,這里就不再詳述。
使用multipart/form-data發送文件
如果要在MIDP客戶端向伺服器上傳文件,我們就必須模擬一個POST multipart/form-data類型的請求,Content-Type必須是multipart/form-data。
以multipart/form-data編碼的POST請求格式與application/x-www-form-urlencoded完全不同,multipart/form-data需要首先在HTTP請求頭設置一個分隔符,例如ABCD:
hc.setRequestProperty("Content-Type", "multipart/form-data; boundary=ABCD");
然後,將每個欄位用「--分隔符」分隔,最後一個「--分隔符--」表示結束。例如,要上傳一個title欄位"Today"和一個文件C:\1.txt,HTTP正文如下:
--ABCD
Content-Disposition: form-data; name="title"
\r\n
Today
--ABCD
Content-Disposition: form-data; name="1.txt"; filename="C:\1.txt"
Content-Type: text/plain
\r\n
--ABCD--
\r\n
請注意,每一行都必須以\r\n結束,包括最後一行。如果用Sniffer程序檢測IE發送的POST請求,可以發現IE的分隔符類似於---------------------------7d4a6d158c9,這是IE產生的一個隨機數,目的是防止上傳文件中出現分隔符導致伺服器無法正確識別文件起始位置。我們可以寫一個固定的分隔符,只要足夠復雜即可。
發送文件的POST代碼如下:
String[] props = ... // 欄位名
String[] values = ... // 欄位值
byte[] file = ... // 文件內容
String BOUNDARY = "---------------------------7d4a6d158c9"; // 分隔符
StringBuffer sb = new StringBuffer();
// 發送每個欄位:
for(int i=0; i
sb = sb.append("--");
sb = sb.append(BOUNDARY);
sb = sb.append("\r\n");
sb = sb.append("Content-Disposition: form-data; name=\""+ props[i] + "\"\r\n\r\n");
sb = sb.append(URLEncoder.encode(values[i]));
sb = sb.append("\r\n");
}
// 發送文件:
sb = sb.append("--");
sb = sb.append(BOUNDARY);
sb = sb.append("\r\n");
sb = sb.append("Content-Disposition: form-data; name=\"1\"; filename=\"1.txt\"\r\n");
sb = sb.append("Content-Type: application/octet-stream\r\n\r\n");
byte[] data = sb.toString().getBytes();
byte[] end_data = ("\r\n--" + BOUNDARY + "--\r\n").getBytes();
// 設置HTTP頭:
hc.setRequestProperty("Content-Type", MULTIPART_FORM_DATA + "; boundary=" + BOUNDARY);
hc.setRequestProperty("Content-Length", String.valueOf(data.length + file.length + end_data.length));
// 輸出:
output = hc.openOutputStream();
output.write(data);
output.write(file);
output.write(end_data);
// 讀取伺服器響應:
// TODO...
5. 如何用fileupload上傳文件
/// <summary>上傳文件方法
/// 返迴文件名
/// </summary>
/// <param name="myFileUpload">上傳控制項ID</param>
/// <param name="allowExtensions">允許上傳的擴展文件名類型,如:string[] allowExtensions = { ".doc", ".xls", ".ppt", ".jpg", ".gif" };</param>
/// <param name="maxLength">允許上傳的最大大小,以M為單位</param>
/// <param name="savePath">保存文件的目錄,注意是絕對路徑,如:Server.MapPath("~/upload/");</param>
public static string Upload(FileUpload myFileUpload, string[] allowExtensions, int maxLength, string savePath)
{
// 文件格式是否允許上傳
bool fileAllow = false;
//檢查是否有文件案
if (myFileUpload.HasFile)
{
// 檢查文件大小, ContentLength獲取的是位元組,轉成M的時候要除以2次1024
if (myFileUpload.PostedFile.ContentLength / 1024 / 1024 >= maxLength)
{
throw new Exception("只能上傳小於" + maxLength + "M的文件!");
}
//取得上傳文件之擴展文件名,並轉換成小寫字母
string fileExtension = System.IO.Path.GetExtension(myFileUpload.FileName).ToLower();
string tmp = ""; // 存儲允許上傳的文件後綴名
//檢查擴展文件名是否符合限定類型
for (int i = 0; i < allowExtensions.Length; i++)
{
tmp += i == allowExtensions.Length - 1 ? allowExtensions[i] : allowExtensions[i] + ",";
if (fileExtension == allowExtensions[i])
{
fileAllow = true;
}
}
if (fileAllow)
{
try
{
string datedir = DateTime.Now.ToString("yyyyMMdd");
if (!Directory.Exists(savePath + datedir))
{
Directory.CreateDirectory(savePath + datedir);
}
string saveName = Guid.NewGuid() + fileExtension;
string path = savePath + datedir + "/" + saveName;
//存儲文件到文件夾
myFileUpload.SaveAs(path);
return datedir + "/" + saveName;
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
else
{
throw new Exception("文件格式不符,可以上傳的文件格式為:" + tmp);
}
}
else
{
throw new Exception("請選擇要上傳的文件!");
}
}
調用:
try
{
string proimg = Niunan.Shop.Utility.Tool.Upload(fuimg, new string[] { ".jpg", ".gif", ".png" }, 3, Server.MapPath("~/upload/"));
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
6. 求commons-fileupload 多文件上傳例子項目是使用jsp+jdbc。謝謝
環境:MyEclipse 6.5 + Tomcat5.5 + Jdk 1.6 並引入 commons-fileupload-1.2.jar
jsp上傳文件代碼 :
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'multiFileUpload.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function addMore(){
var td=document.getElementById("moreFile");
var br=document.createElement("br");
var input=document.createElement("input");
var button=document.createElement("input");
input.type="file";
input.name="file";
button.type="button";
button.value="-";
button.onclick=function(){
td.removeChild(br);
td.removeChild(input);
td.removeChild(button);
}
td.appendChild(br);
td.appendChild(input);
td.appendChild(button);
}
</script>
</head>
<body>
<form action="upload/uploadAction.jsp" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>多文件上傳</td>
<td></td>
</tr>
<tr>
<td>文件:</td>
<td id="moreFile"><input name="file1" type="file" /><input type="button" value=" + " onclick="addMore()"/></td>
</tr>
<tr>
<td><input type="submit" value="開始上傳" /></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
jsp處理請求頁面代碼:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="org.apache.commons.fileupload.FileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.io.FileOutputStream"%>
<%@page import="java.io.BufferedReader"%>
<%@page import="java.io.InputStreamReader"%>
<%@page import="org.apache.commons.fileupload.FileUploadException"%>
<%
//設定請求字元集,防止中文文件名亂碼
request.setCharacterEncoding("UTF-8");
//錯誤或異常提示信息
String errorMsg="";
String strFileName = "";
String path = request.getRealPath("/") + File.separator + "upload/";//上傳文件的路徑
//判斷form是否是multpart/form-data
if(FileUpload.isMultipartContent(request)){
DiskFileItemFactory factory = new DiskFileItemFactory();
// 設置上傳工廠的限制
factory.setSizeThreshold(1024 * 1024 * 20);
//new File(request.getRealPath("/")可以具體執行路徑
factory.setRepository(new File(path));
// 創建一個上傳文件的ServletFileUpload對象
ServletFileUpload upload = new ServletFileUpload(factory);
// 設置最大的上傳限制,-1表示無限制
upload.setSizeMax(1024 * 1024 * 20);
// 處理HTTP請求,items是所有的表單項
try {
List<FileItem> items = upload.parseRequest(request);
if(null==items){
errorMsg = "未上傳文件,請選擇...";
}else{
for(FileItem fi : items){
//判斷提交表單元素,是否是上傳組件(type=file)
if(fi.isFormField()){
errorMsg = "上傳的不是文件類型";
}else{
// 取得文件類型
String fileName = fi.getName();
if(fileName!=null && !"".equals(fileName)&&fileName.length()>0)
{
strFileName = fileName.substring(fileName.lastIndexOf("\\"),fileName.length());
FileOutputStream fos = new FileOutputStream(path + strFileName);
if (fi.isInMemory()) {
fos.write(fi.get());
} else {
BufferedReader is = new BufferedReader(
new InputStreamReader(fi.getInputStream()));
String str = null;
while ((str += is.readLine()) != null) {
byte[] buffer = str.getBytes("ISO-8859-1");
fos.write(buffer);
}
is.close();
}
fos.close();
}
}
}
errorMsg="文件上傳成功";
}
} catch (FileUploadException e) {
errorMsg = "文件上傳發生錯誤"+e.getMessage();
e.printStackTrace();
}
}else{
errorMsg = "提交的表單屬性設置不正確,不是上傳文件的表單";
}
request.setAttribute("msg", errorMsg);
request.getRequestDispatcher("/result.jsp").forward(request, response);
%>
處理結果頁面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文件上傳結果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
上傳結果:${msg }
</body>
</html>
7. 多文件上傳思路
大概看了一下的代碼,這個程序應該是 Web Form 的程序吧?
如果是這樣的話,你可以 javascript 的方式來實現啊。比如開始頁面上只有一個 <input type="file" name="uploader" />。旁邊加一個按鈕或者鏈接什麼的,當被點擊的時候調用客戶端腳本添加一個新的 <input type="file" name="uploader" /> 元素。這樣就可以同時上傳多個文件了哦
然後在伺服器端可以調用 Page.Request.Files 獲取剛上傳的文件
==================================
在 .NET 中,FileUpload 控制項最後都會被轉化成HTML中的 <input type="text" /> 元素。而這個 HTML 元素是只能一次上傳一個文件的。
你如果要一次上傳幾個文件:
1. 用腳本生成多個 <input type="text" /> HTML 元素
2. 如果只使用一個 FileUpload 控制項,那麼點上傳的時候可以將文件暫時保存在伺服器的內存中。這樣 FileUpload 就又可以繼續上傳新的文件了
8. 關於FileUpload控制項上傳文件大小限制問題
默認上傳文件大小4096KB,如果要上傳超過此大小的文件,會出現錯誤界面。可以對web.config文件做一下配置,就可以解決,解決方法如下:
1、首先創建一個名稱為 file_value 的html文件。
9. jQuery fileupload 多文件上傳
//js
$(function(){
//文件上傳地址
//varurl='http://localhost/index.php/upload/do_upload';
varurl='http://localhost/index.php/uploadwe';
//初始化,主要是設置上傳參數,以及事件處理方法(回調函數)
$('#fileupload').fileupload({
autoUpload:true,//是否自動上傳
//url:url,//上傳地址
dataType:'json',
done:function(e,data){//設置文件上傳完畢事件的回調函數
//$.each(data.result.files,function(index,file){
$("#myimg").attr({src:data.result.imgurl});
$("#myimg").css({width:"290px",height:"218px"});
//alert(data.result);
},
progressall:function(e,data){//設置上傳進度事件的回調函數
varprogress=parseInt(data.loaded/data.total*5,10);
$('#progress.bar').css(
'width',
progress+'%'
);
}
});
});
//上傳至服務後,伺服器返回json數據--上傳圖片的地址。
//html
<labelfor="text">上傳圖片</label>
<inputid="fileupload"type="file"name="files"data-url="<spanstyle="color:#ff6666;">jquery_save_img</span>"multiple>
//data-url為上傳至伺服器端的處理介面/地址,可替換js中的url
//伺服器端
functionjquery_save_img()
{
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');
$max_size='500000000000';//最大文件限制(單位:byte)
$upfile='./uploads';//圖片目錄路徑
$file=$_FILES['files'];
/*
echo'filename:'.$file['tmp_name'].';<br/>';
echo'size:'.$file['size'].';<br/>';
echo'type:'.$file['type'].';<br/>';
echo'name:'.$file['name'].';<br/>';
*/
if($_SERVER['REQUEST_METHOD']=='POST'){//判斷提交方式是否為POST
if(!is_uploaded_file($file['tmp_name'])){//判斷上傳文件是否存在
echo"<fontcolor='#FF0000'>文件不存在!</font>";
exit;
}
if($file['size']>$max_size){//判斷文件大小是否大於500000位元組
echo"<fontcolor='#FF0000'>上傳文件太大!</font>";
exit;
}
if(!in_array($file['type'],$arrType)){//判斷圖片文件的格式
echo"<fontcolor='#FF0000'>上傳文件格式不對!</font>xxx:".$file['type'];
exit;
}
if(!file_exists($upfile)){//判斷存放文件目錄是否存在
mkdir($upfile,0777,true);
}
$imageSize=getimagesize($file['tmp_name']);
$img=$imageSize[0].'*'.$imageSize[1];
$fname=$file['name'];
$ftype=explode('.',$fname);
$picName=$upfile."/cloudy".$fname;
if(file_exists($picName)){
//echo"<fontcolor='#FF0000'>同文件名已存在!</font>";
//exit;
}
if(!move_uploaded_file($file['tmp_name'],$picName)){
echo"<fontcolor='#FF0000'>移動文件出錯!</font>";
exit;
}
else{
/*
echo"<fontcolor='#FF0000'>圖片文件上傳成功!</font><br/>";
echo"<fontcolor='#0000FF'>圖片大小:$img</font><br/>";
echo"圖片預覽:<br><divstyle='border:#F001pxsolid;width:200px;height:200px'>
<imgsrc="".$picName.""width=200pxheight=200px>".$fname."</div>";
*/
echo'{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}';
}
}
}
10. bootstrap-fileupload 怎麼多文件上傳
最近因為項目需要研究了下bootstrap fileinput的使用,來記錄下這幾天的使用心得吧。 前台html頁面的代碼 參數2 參數3 參數4 js進行插件的初始化和一些參數的設置 $("#excelFile").fileinput({ uploadUrl:"rest/import/importExcel",//上傳的地...