file多文件上传

㈠ bootstrap 多文件上传

```

<link href="/static/backend/css/fileinput.css" rel="stylesheet" />

 <script src="/static/backend/js/fileinput.js"></script>

 <link href="/static/backend/css/fileinput.min.css" rel="stylesheet" />

 <script src="/static/backend/js/fileinput.min.js"></script>

      <div class="file-loading">

        <input type="file" id="myfile" name="myfile[]" multiple data-allowed-file-extensions='["csv"]'/>//只能是csv 文件。 name=myfile[] 可以上传多个文件

       </div>

 </div>

Js

 $("#myfile").fileinput({

uploadUrl: "/backend/home/upload", //上传地址

uploadAsync: false, //设置上传同步异步 此为同步

            showUpload: true,

            showRemove: true,

         //   showClose: true,

maxFileCount: 10, //表示允许同时上传的最大文件个数

          /*  layoutTemplates:{

                actionDelete: ''

            },

            browseClass: 'btn btn-primary'*/

        });

后台/backend/home/upload

 public function upload(){

        var_mp($_FILES['myfile']);

      foreach ($_FILES["myfile"]['tmp_name'] as$k =>$v){

                   move_uploaded_file($v,ROOT_PATH.'public'.DS.'uploads'.DS.$_FILES['myfile']['name'][$k]);

Uploads要自己创建好文件夹

            }

        return 1; // 上传后要返回1

    }

```

<input type="file" id="myfile" name="myfile" multiple 控制可以上传多个 data-allowed-file-extensions='["csv"]'/>

 当点击上传后，报错，提示你必须选择最少X个文件上传。

input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。

data-allowed-file-extensions= '["csv"]'

限定上传什么文件。

㈡ java中 是否允许多个 type=个file同时上传

java中是可以支持多文件上传的，参考代码如下：

@RequestMapping(value={"multipleFileUpload"},method={RequestMethod.GET,RequestMethod.POST})
(
ModelMapmodelMap,
,
HttpServletResponseresponse,
@RequestParam(value="type")Stringtype,
@RequestParam(value="jobId")StringjobId)throwsIOException{
List<MultipartFile>files=request.getFiles("files");
response.setHeader("Access-Control-Allow-Origin","http://www.gifmiao.com");
Map<String,Object>statusMap=newHashMap<>();
HttpSessionsession=request.getSession();
session.setAttribute("gifCompressStatus",statusMap);
intcompressSize=getCompressSizeByValue(type);
for(MultipartFilefile:files){
搭高Stringfilename=file.getOriginalFilename().split(".gif")[0];
Map<String,Object>resultMap=newHashMap<>();
resultMap.put("size",0);
resultMap.put("status",0);
昌悔resultMap.put("url","");
statusMap.put(filename,resultMap);
InputStreamis=file.getInputStream();
byte[]bytes=IOUtils.toByteArray(is);
CompressWorkerworker=newCompressWorker(statusMap,bytes,filename,compressSize,jobId);
worker.start();
}
modelMap.addAttribute("json",StringUtils.toInsensitiveJson(newReturnMap("线程已启动")));
耐枝正return"json";
}

㈢ 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);
}
}

㈣ springboot多文件上传

MultipartFile提供了以下方法来获取上传文件的信息：

getOriginalFilename，获取上传的文件名字；

getBytes，获取上传文件内容，转为字节数组；

getInputStream，获取一个InputStream；

isEmpty，文件上传内容为空，或者根本就没有文件上传；

getSize，文件上传的大小。

transferTo（File dest），保存文件到目标文件系统；

同时上传多个文件，则使用MultipartFile数组类来接受多个文件上传：

//多文件上传 @RequestMapping(value = "/batch/upload", method = RequestMethod.POST)

    @ResponseBody    public String handleFileUpload(HttpServletRequest request){

        List<MultipartFile> files = ((MultipartHttpServletRequest) request)

                .getFiles("file");

        MultipartFile file = null;

        BufferedOutputStream stream = null;

        for (int i = 0; i < files.size(); ++i) {

            file = files.get(i);

            if (!file.isEmpty()) {

                try {

                    byte[] bytes = file.getBytes();

                    stream = new BufferedOutputStream(new FileOutputStream(

                            new File(file.getOriginalFilename())));

                    stream.write(bytes);

                    stream.close();

                } catch (Exception e) {

                    stream = null;

                    return "You failed to upload " + i + " => "                            + e.getMessage();

                }

            } else {

                return "You failed to upload " + i

                        + " because the file was empty.";

            }

        }

        return "upload successful";

    }

可以通过配置application.properties对SpringBoot上传的文件进行限定默认为如下配置：

spring.servlet.multipart.enabled=true

spring.servlet.multipart.file-size-threshold=0

spring.servlet.multipart.location=

spring.servlet.multipart.max-file-size=1MB

spring.servlet.multipart.max-request-size=10MB

spring.servlet.multipart.resolve-lazily=false

enabled默认为true，既允许附件上传。

file-size-threshold限定了当上传文件超过一定长度时，就先写到临时文件里。有助于上传文件不占用过多的内存，单位是MB或KB，默认0，既不限定阈值。

location指的是临时文件的存放目录，如果不设定，则web服务器提供一个临时目录。

max-file-size属性指定了单个文件的最大长度，默认1MB，max-request-size属性说明单次HTTP请求上传的最大长度，默认10MB.

resolve-lazily表示当文件和参数被访问的时候再被解析成文件。

㈤ 请问你有Thinkphp下使用Bootstrap File Input多文件上传的案例吗

现在我们开始使用插件
(1)首先引入文件
<!--css文件-->
<link href="__PUBLIC__/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

<link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

<!--js文件-->
<script src="__PUBLIC__/js/jQuery.min.js" type="text/JavaScript"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/plugins/fileinput.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/fileinput.min.js" type="text/javascript"></script>

(2)初始化控件
<input id="file" name="file_data[]" type="file" multiple data-preview-file-type="any" data-show-caption="true">
data-preview-file-type="any" ：设置之后可以上传多个文件
name="file_data[]" ：因为要上传多个文件所以要用数组
(3)js初始化控件
$("#file").fileinput({
uploadUrl: "{:U('Admin/Img/imgupload2')}",// 上传路径
uploadAsync: false,//是否异步传输
maxFileCount: 5//最大文件上传数量
}).on('filebatchpreupload', function(event, data, id, index) {

}).on('filebatchuploadsuccess', function(event, data) {//上传成功从服务器端返回的数据（即保存的文件名称）
for(var i=0;i<data.response.length;i++){
alert(data.response[i].flag);
}
});
(4)thinkphp对应的方法
public function imgupload2(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Public/Uploads/';// 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传（子）目录
$info = $upload->upload(array($_FILES['file_data'])); // 上传文件
$i=0;
if(!$info) {// 上传错误提示错误信息
$a[$i]['flag']="no";
$this->ajaxReturn($a,'JSON');
}else{// 上传成功 获取上传文件信息
foreach($info as $file){
$a[$i]['flag']=$file['savepath'].$file['savename'];
$i++;
}
}
$this->ajaxReturn($a,'JSON');
}

㈥ 多文件上传思路

大概看了一下的代码，这个程序应该是 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 就又可以继续上传新的文件了

㈦ 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.'"}';
}
}

}