⑴ 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>