ajax上傳檔案：ajaxSubmit使用

       大多上傳檔案的時候，都是使用表單的方式進行提交的。 使用form表單上傳檔案，也有很多種方式：

       1、介面上直接使用submit按鈕提交。這種方式可以實現效果但是沒有success事件。即，可以上傳檔案，但是沒有反饋資訊。
       2、使用jquery的form方法提交表單，這種提交方式，可以對錶單指定 onSubmit、success、error事件。這種方式會更加友好一些。 問題原因：通常使用Jquery就可以實現檔案的上傳。

       因為最近我們系統中的一些原因，導致Jquery的$與前台架構bootstrap上的$有衝突，所以如果使用前台架構之後，Jquery的$裡面沒有form方法。這就有些麻煩了。
       如果是用上面第一種方式提交檔案的話，那麼的確可以，就是不太友好。

所以為瞭解決上述遇到的問題，可以有兩種解決方案:
       1、解決衝突，畢竟JQuery和前台架構都不可少的。
       2、重新尋找上傳表單的方法。

       經過尋找決定使用ajax進行檔案的上傳。網上一搜，找到了一個外掛程式，使用ajaxFileupload方法提交。

接下來看一個執行個體，簡單實現檔案的上傳。 樣本 前台：

<script type="text/javascript">    /**    * 上傳檔案（step.js中需要用的方法）    * @param formTag    */    function uploadFile(){        $.ajaxFileUpload({             method:"POST",            url:ctx+"/leadtoQuestionTypes/ImportMongoMedia",            //需要連結到伺服器位址              secureuri:true,              fileElementId:'fileName',                        //檔案選擇框的id屬性             data:$('#picForm').serialize(),            success: function(data,s, status){             //上傳成功之後的操作            },error: function (data, status, e){             //上傳失敗之後的操作            }          });    }</script><form method="post" enctype="multipart/form-data">                  <input type="file" id="fileName" name="fileName"  style="display:-webkit-inline-box;width: 180px;"/>        <input type="button" style="width:70px;" src="image/backGroup.png" onclick="uploadFile()" value="上傳檔案">         </form>

Controller(Spring MVC)

@RequestMapping("ImportMongoMedia")public String ImportMongoMedia(@RequestParam(value = "fileName") MultipartFile file,        HttpServletRequest request, HttpServletResponse response)        throws UnsupportedEncodingException {    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;    //擷取上傳的檔案    MultipartFile file1 = multipartRequest.getFile("fileName");    //擷取檔案名稱    String fileName = file.getOriginalFilename();    //擷取檔案路徑    String logoRealPathDir = request.getSession().getServletContext()            .getRealPath(fileName);    File localFile = new File(logoRealPathDir);    try {        file1.transferTo(localFile);    } catch (IllegalStateException | IOException e) {        e.printStackTrace();    }    String MediaID = UUID.randomUUID().toString();    LinkedHashMap map = new LinkedHashMap();    MongoUtil mongoUtil = new MongoUtil();    mongoUtil.uploadFile(localFile, MediaID, dbName, collectionName, map);    return MediaID;}

controller擷取檔案之後，就可以調用後台上傳的方法了。

       雖然可以實現，但$衝突的問題還是需要解決。對於一種功能的實現，只有掌握多種實現方式，才能實現無困難編碼，才能挑選高效能的方案。