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

}