⑴ file控制項怎麼上傳多個文件
File控制項是一個必須結合伺服器端功能才能實現的純客戶端控制項。
要使得文件上載能夠成功，要做到以下幾點:
INPUT type=file 元素必須出現在 FORM 元素內。
必須為 INPUT type=file 元素指定 NAME 標簽屬性的值。
FORM 元素 METHOD 標簽屬性的值必須設置為 post。
FORM 元素 ENCTYPE 標簽屬性的值必須設置為 multipart/form-data。
要處理上載到伺服器的文件，伺服器端進程必須可以處理 multipart/form-data 的提交。例如，Microsoft Posting Acceptor 能夠允許 Microsoft Internet Information Server (IIS) 接受文件上載。而在網上也可找到其它的 Common Gateway Interface (CGI) 腳本用於處理 multipart/form-data 提交。
用戶選擇要上載的文件並提交頁面後，該文件作為請求的一部分上載。文件將被完整地緩存在伺服器內存中。
File控制項一次只能上傳一個文件，並且其文件屬性值都是只讀的。採用File控制項同時上傳多個文件，實際上是動態生成多個File控制項，每選擇上傳一個文件，隱藏該控制項，生成另一個File控制項。這里只需要簡單的JavaScript技巧既可以實現，所以不做贅述。
以ASP.NET為例，介紹在伺服器端所需要進行的處理。
//獲取上傳文件列表
HttpFileCollection fileCollection = HttpContext.Current.Request.Files;
//逐個上傳每個文件
for (int index = 0; index < HttpContext.Current.Request.Files.Count; index++)
{
HttpPostedFile postedFile = HttpContext.Current.Request.Files[index];
filename = postedFile.FileName;
if (postedFile.FileName != "")
{
postedFile.SaveAs(uploadPath);
}
}
⑵ javaWEB項目多個文件(如圖片）上傳，如何實現，有沒有什麼控制項
ajaxfileupload.js 頁面無刷新上傳 多文件上傳 自己試試吧
⑶ javaWEB項目中如何實現批量選擇文件並上傳呢有什麼好的插件，最好有相關代碼例子
jquery.uploadify批量上傳控制項
[html]
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>還有jquery.js,你懂得!
這里注意哦,css文件會引用到這個圖片哦,所以請你指定這個圖片的位置哦,不然就沒有顯示這個叉叉哦,這個叉叉是刪除按鈕的哦,沒有就是空白哦!
[javascript]
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//這個是我自己獲取的自定義參數
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默認是false
'auto':false,//自動上傳,就是控制項自動上傳,默認是true
'multi':true,
//'successTimeout':99999,//超時時間
'formData':{'pid':pid,'entityName':entityName},//我的參數列表
//'fileObjName':'uploadify',//伺服器的屬性名字
'uploader':'你的後台url地址;jsessionid=${pageContext.session.id}',//提交伺服器路徑,這里
說明下;jsessionid=${pageContext.session.id},這個是用於非IE內核的瀏覽器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路徑用處不大
'buttonText':'文件上傳',//按鈕
//'height':'32',//瀏覽按鈕的高度
//'width':'100',//瀏覽按鈕的寬度
'fileTypeDesc':'支持的格式：',//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允許上傳的文件後綴
'fileSizeLimit':'3MB',//上傳文件的大小限制
'queueSizeLimit':25,//上傳數量
'onSelectError':function(file,errorCode,errorMsg){//返回一個錯誤，選擇文件的時候觸發
switch(errorCode){
case-100:
alert("上傳的文件數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件！");
break;
case-110:
alert("文件["+file.name+"]大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case-120:
alert("文件["+file.name+"]大小異常！");
break;
case-130:
alert("文件["+file.name+"]類型不正確！");
break;
}
},
'onFallback':function(){//檢測FLASH失敗調用
alert("您未安裝FLASH控制項，無法上傳圖片！請安裝FLASH控制項後再試。");
},
'onUploadSuccess':function(file,data,response){//上傳到伺服器，伺服器返回相應信息到data里
if(data){
vardataObj=eval("("+data+")");//轉換為json對象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//這個是我自己獲取的自定義參數
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默認是false
'auto':false,//自動上傳,就是控制項自動上傳,默認是true
'multi':true,
//'successTimeout':99999,//超時時間
'formData':{'pid':pid,'entityName':entityName},//我的參數列表
//'fileObjName':'uploadify',//伺服器的屬性名字
'uploader':'你的後台url地址;jsessionid=${pageContext.session.id}',//提交伺服器路徑,這里
說明下;jsessionid=${pageContext.session.id},這個是用於非IE內核的瀏覽器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路徑用處不大
'buttonText':'文件上傳',//按鈕
//'height':'32',//瀏覽按鈕的高度
//'width':'100',//瀏覽按鈕的寬度
'fileTypeDesc':'支持的格式：',//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允許上傳的文件後綴
'fileSizeLimit':'3MB',//上傳文件的大小限制
'queueSizeLimit':25,//上傳數量
'onSelectError':function(file,errorCode,errorMsg){//返回一個錯誤，選擇文件的時候觸發
switch(errorCode){
case-100:
alert("上傳的文件數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件！");
break;
case-110:
alert("文件["+file.name+"]大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case-120:
alert("文件["+file.name+"]大小異常！");
break;
case-130:
alert("文件["+file.name+"]類型不正確！");
break;
}
},
'onFallback':function(){//檢測FLASH失敗調用
alert("您未安裝FLASH控制項，無法上傳圖片！請安裝FLASH控制項後再試。");
},
'onUploadSuccess':function(file,data,response){//上傳到伺服器，伺服器返回相應信息到data里
if(data){
vardataObj=eval("("+data+")");//轉換為json對象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
[javascript]
$(function(){
snedUpLoad();//jquery容器載入完運行我們的函數
})
$(function(){
snedUpLoad();//jquery容器載入完運行我們的函數
})
[html]
<inputtype="file"name="uploadify"id="uploadify"/>//申明控制項的容器
<inputtype="file"name="uploadify"id="uploadify"/>//申明控制項的容器
前台頁面代碼基本就這樣了,很好明白,至於後台邏輯和普通上傳處理一致的,這里就不列出來的,最後上一張圖給大家鑒賞一下
(tip:其實他的批量上傳並不是一次全部提交處理的,他是一個一個依次提交,相當是一個for循環,所以後台處理的同時只是一個文件上傳,即排序的處理上傳文件,就和單個文件上傳的代碼一樣,如果你早有後台的單文件上傳代碼就不用改,直接調用就行了,可以共用)
⑷ zyupload怎麼在多個上傳控制項
zyUpload使用需要注意的幾個地方：
說明：zyUpload 配合Strus2實現圖片或文件的上傳
（1）zyFile.js，lanrenjia.js，zyUpload.js設置 url : "fileUploadAction!execute", // 上傳文件的路徑
（2）文件的上傳通過 zyFile.js中的funUploadFile函數，修改formdata.append("upload", file) file對應的name屬性值，這里是"upload"，保證和後台的name屬性值一樣！上傳的代碼如下：
⑸ 多文件上傳,Jquery Upload插件，不知道怎麼刷新！
onQueueComplete//
你應該用上面這個函數；
你用的那個函數，是每個文件上傳結束以後都會執行的；而這個函數是隊列里所有文件都上傳完以後才執行。
⑹ 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.'"}';
}
}
}
⑺ 使用FileUpload控制項實現多文件上傳的問題
引用
8
樓
wszhoho
的回復:ListBox控制項，不能獲取本地文件，你只能通過fileupload去做。在客戶端，你也無法通過fileupload獲取到文件路徑，顯示在listbox里。換個思路試試吧。
⑻ jquery怎麼上傳多個文件上傳
jquery有個插件叫uploadify
http://www.uploadify.com/
$(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 });});
⑼ IE8如何支持多文件上傳
在HTML5中，表單元素有一個新的屬性multiple，可實現多選功能。
<input type="file" multiple>
這樣就可以實現多文件上傳，但是此方法不兼容ie8等低版本瀏覽器。所以項目中我使用的是網路的WebUpload插件，此插件在ie中底層使用flash實現多文件上傳。
以下代碼是簡單的demo，具體使用方法可依據官方文檔。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="webuploader.css"/></head><body><div id="uploader" class="wu-example"><!--用來存放文件信息--><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">選擇文件</div><button id="ctlBtn" class="btn btn-default">開始上傳</button></div></div><script src="jquery-1.8.3.min.js"></script><script src="webuploader.js"></script><script>var uploader = WebUploader.create({// swf文件路徑swf: 'Uploader.swf',// 文件接收服務端。server: 'http://webuploader.app.com/server/fileupload.php',// 選擇文件的按鈕。可選。// 內部根據當前運行是創建，可能是input元素，也可能是flash.pick: '#picker',// 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！resize: false,//去重plicate: true,//限制文件大小fileSingleSizeLimit: 50000,//單位(位元組B)//可上傳文件的類型accept: {extensions: 'docx,doc,xls,xlsx,ppt,pptx,wps,et,txt,ole,pdf,ceb,jpg,jpeg,bmp,png,rar,zip,caj'}});// 當有文件被添加進隊列的時候uploader.on( 'fileQueued', function( file ) {$("#thelist").append( '<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<p class="state">等待上傳...</p>' +'</div>' );});// 文件上傳過程中創建進度條實時顯示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar');// 避免重復創建if ( !$percent.length ) {$percent = $('<div class="progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo( $li ).find('.progress-bar');}$li.find('p.state').text('上傳中');$percent.css( 'width', percentage * 100 + '%' );});uploader.on( 'uploadSuccess', function( file ) {$( '#'+file.id ).find('p.state').text('已上傳');});uploader.on( 'uploadError', function( file ) {$( '#'+file.id ).find('p.state').text('上傳出錯');});uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').fadeOut();});$("#ctlBtn").bind('click', function() {//向伺服器端傳遞的參數uploader.options.formData = {"uuid": "234124"};uploader.upload();});</script></body></html>