結一下，JavaWeb前后端常見的幾種上傳文件的方式：

一、JavaWeb前端上傳文件的幾種方式：

1、表單上傳

最傳統(tǒng)的圖片上傳方式是form表單上傳，使用form表單的input[type="file"]控件，打開系統(tǒng)的文件選擇對話框，從而達到選擇文件并上傳的目的。

代碼示例如下：

<form action="uploadFile" method="post" 
    enctype="multipart/form-data">
    <label for="file">文件名</label>
    <input id="file" name="file" type="file"/>
    <input type="submit" name="submit" value="提交"/>
</form>

表單上傳需要注意以下幾點：

（1）提供form表單，method必須是post類型。

（2）form表單的enctype必須是multipart/form-data。

enctype屬性規(guī)定在發(fā)送到服務器之前應該如何對表單數(shù)據(jù)進行編碼。默認地，表單數(shù)據(jù)會編碼為“application/x-www-form-urlencoded”。就是說，在發(fā)送到服務器之前，所有字符都會進行編碼。HTML表單如何打包數(shù)據(jù)文件是由enctype這個屬性決定的。enctype有以下幾種取值：

• application/x-www-form-urlencoded：在發(fā)送之前編碼所有字符（默認）（空格被編碼為‘+’，特殊字符被編碼為ASCII十六進制字符）。
• multipart/form-data：不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
• text/plain：空格轉(zhuǎn)換為“+”加號，但不對特殊字符編碼。

默認enctype=application/x-www-form-urlencoded，所以表單的內(nèi)容會按URL規(guī)則編碼，然后根據(jù)表單的提交方法：

method='get' 編碼后的表單內(nèi)容附加在請求連接后，

method='post' 編碼后的表單內(nèi)容作為post請求的正文內(nèi)容。

（3）提供input type="file"上傳輸入域。

2、Ajax上傳

ajax和FormData可實現(xiàn)頁面無刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。通過FormData對象可以更靈活方便地發(fā)送表單數(shù)據(jù)，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data，則通過FormData傳輸?shù)臄?shù)據(jù)格式和表單通過submit()方法傳輸?shù)臄?shù)據(jù)格式相同。

<form>
    <input type="file" name="file" id="file"/>
</form>
<script>
    $("#file").on("change", function() {
        var formData=new FormData();
        formData.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: "uploadFile",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert("hahaha");
            }
        });
    })
</script>

ajax無刷新上傳的方式，本質(zhì)上與表單上傳無異，只是把表單里的內(nèi)容提出來采用ajax提交，并且由前端決定請求結果回傳后的展示結果。

3、各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統(tǒng)的表單上傳很難實現(xiàn)這些功能，我們可以借助現(xiàn)有插件完成。

如：百度上傳插件Web Upload、jQuery圖片預覽插件imgPreview、拖拽上傳與圖像預覽插件Dropzone.js等等。

二、JavaWeb后端上傳文件的幾種方式：

1、使用springMVC原生上傳文件方法

（1）首先需要一些簡單的配置

<bean id="multipartResolver" class="com.zxm.fileupload.
    UploadCommonsMultipartResolver">
    <!-- 默認編碼 -->
    <property name="defaultEncoding" value="utf-8"/>
    <!-- 文件大小最大值 -->
    <property name="maxUploadSize" value="10485760000"/>
    <!-- 內(nèi)存中的最大值 -->
    <property name="maxInMemorySize" value="40960"/>
</bean>

（2）controller中的代碼：

@RequestMapping("upload")
public String upload(HttpServletRequest request) throws 
    IllegalStateException, IOException {
    long  startTime=System.currentTimeMillis();
    
    //將當前上下文初始化給CommonsMutipartResolver（多部分解析器）
    CommonsMultipartResolver multipartResolver=new 
        CommonsMultipartResolver(
        request.getSession().getServletContext());
        
    //檢查form中是否有enctype="multipart/form-data"
    
    if(multipartResolver.isMultipart(request)) {
        //將request變成多部分request
        MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
        //獲取multiRequest 中所有的文件名
        Iterator iter=multiRequest.getFileNames();
        
        while(iter.hasNext()) {
            //一次遍歷所有文件
            MultipartFile file=multiRequest.
            getFile(iter.next().toString());
            if(file!=null) {
                String path="E:/upload/"+
                file.getOriginalFilename();
                //上傳
                file.transferTo(new File(path));
            }
        }
    }
    
    long endTime=System.currentTimeMillis();
    
    System.out.println("Spring方法的運行時間："
    +String.valueOf(endTime-startTime)+"ms");
    return "success"; 
} 

2、采用file.Transto來保存上傳的文件，這是目前自認為最好的上傳方式，代碼簡單，速度快

@RequestMapping("upload")
public String upload(@RequestParam("file")
CommonsMultipartFile file) throws IOException {

 long startTime=System.currentTimeMillis();
 System.out.println("fileName:"+file.getOriginalFilename());
 String path="E:/upload/" + new Date().getTime()+
     file.getOriginalFilename();
     
 File newFile=new File(path);
 //通過CommonsMultipartFile的方法直接寫文件
 file.transferTo(newFile);
 
 long endTime=System.currentTimeMillis();
 System.out.println("采用file.Transto的運行時間："
     +String.valueof(endTime-startTime)+"ms");
 return "success";
}

3、采用流的方式上傳

此方式又慢又難寫

@RequestMapping("upload")
public String upload(@RequestParam("file")
CommonsMultipartFile file) throws IOException {
    
    //用來檢測程序運行時間
 long startTime=System.currentTimeMillis();
 System.out.println("fileName:"+file.getOriginalFilename);
 
 try {
     //獲取輸出流
     OutputStream oStream=new FileOutputStream(
         "E:/upload/"+new Date().getTime() +
         file.getOriginalFilename());
     //獲取輸入流CommonsMultipartFile中可以直接得到文件的流
     InputStream iStream=file.getInputStream();
     byte[] bts=new byte[1024];
     //一個字節(jié)一個字節(jié)地讀取并寫入
     while(iStream.read(bts)!=-1) {
         oStream.write(bts);
     }
     oStream.flush();
     oStream.close();
     iStream.close();
 } catch(FileNotFoundException e) {
     e.printStackTrace();
 }
 
 long endTime=System.currentTimeMillis();
 System.out.println("采用流上傳的方式的運行時間："+
     String.valueOf(endTime-startTime)+"ms");
     
 return "success";
}

JavaWeb后臺上傳的這三種方式中，第二種最優(yōu)，第一種次之，第三種最不推薦。

avaScript開發(fā)——文件夾的上傳和下載，JavaScript實現(xiàn)文件夾的上傳和下載，JavaScript實現(xiàn)文件夾的上傳和下載解決方案，JavaScript實現(xiàn)文件夾的上傳和下載思路，JavaScript實現(xiàn)文件夾的上傳和下載源碼，JavaScript實現(xiàn)文件夾的上傳和下載實例，JavaScript實現(xiàn)大文件分塊上傳和下載，JavaScript實現(xiàn)大文件分片上傳和下載，JavaScript實現(xiàn)大文件加密上傳和下載，JavaScript實現(xiàn)大文件批量上傳和下載，

前端用了JS，JQuery,vue2,vue3,vue-cli,html5,html

網(wǎng)上搜了一下，基本上大部分的文章里面提到的前端JS或VUE或HTML5上傳文件夾的方案都是使用JS的API來實現(xiàn)的，也就是html5提供的一個API，也就是chrome提供的API。用是能用，但是不夠好用，有很多限制，也不夠靈活。不太能夠滿足用戶的實際應用需求，

多多少少還是有點問題，穩(wěn)定性，靈活性，可擴展性，安全性方面還是有點問題。chrome的每個域名只允許5個TCP連接的限制，這個基本上是一個無法逾越的鴻溝，目前為止網(wǎng)上還沒有發(fā)現(xiàn)哪家公司或者個人能夠突破的。

我們做項目的話個人用戶比較少，一般都是行業(yè)用戶，比如政府，公司，金融，這類企業(yè)，他們對用戶體驗要求較高。就實際項目開發(fā)和實施的情況來看，html5或者chrome提供的功能基本上都是不能夠滿足他們需求的，都需要我們進行定制開發(fā)。

文件夾上傳，html5提供了API,用戶開始用的時候還行，然后就提了要求要求支持斷點續(xù)傳，

斷點續(xù)傳，就是在文件上傳的過程中發(fā)生了中斷，人為因素（暫停）或者不可抗力（斷網(wǎng)或者網(wǎng)絡差）導致了文件上傳到一半失敗了。然后在環(huán)境恢復的時候，重新上傳該文件，而不至于是從新開始上傳的。

斷點續(xù)傳的功能是基于分塊上傳來實現(xiàn)的，把一個大文件分成很多個小塊，服務端能夠把每個上傳成功的分塊都落地下來，客戶端在上傳文件開始時調(diào)用接口快速驗證，條件選擇跳過某個分塊。

實現(xiàn)原理，就是在每個文件上傳前，就獲取到文件MD5取值，在上傳文件前調(diào)用接口，如果獲取的文件狀態(tài)是未完成，則返回所有的還沒上傳的分塊的編號，然后前端進行條件篩算出哪些沒上傳的分塊，然后進行上傳。

當接收到文件塊后就可以直接寫入到服務器的文件中。

導入項目：
導入到Eclipse：http://www.ncmem.com/doc/view.aspx?id=9da9c7c2b91b40b7b09768eeb282e647
導入到IDEA：http://www.ncmem.com/doc/view.aspx?id=9fee385dfc0742448b56679420f22162
springboot統(tǒng)一配置：http://www.ncmem.com/doc/view.aspx?id=7768eec9284b48e3abe08f032f554ea2

下載示例：

https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.40/

工程

NOSQL

NOSQL示例不需要任何配置，可以直接訪問測試

創(chuàng)建數(shù)據(jù)表

選擇對應的數(shù)據(jù)表腳本，這里以SQL為例

修改數(shù)據(jù)庫連接信息

訪問頁面進行測試

文件存儲路徑

up6/upload/年/月/日/guid/filename

相關問題：
1.javax.servlet.http.HttpServlet錯誤
2.項目無法發(fā)布到tomcat
3.md5計算完畢后卡住
4.服務器找不到config.json文件

相關參考：

文件保存位置

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
授權生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwTIcFph1