我們都知道 當Html input  標籤型別為file時 同時將from 表單元素的enctype屬性設定為 multipart/form-data 這樣就可以上傳檔案 ，但是這種方式 只能上傳文字檔案 不能上傳視訊 檔案。這時出現了功能強大的第三方js工具類 fileupload 實現了任何型別的檔案都能上傳  例子如下：

  <form id="formId" action="" method="post" enctype="multipart/form-data" class="form-horizontal ">
         <label class="col-md-3 control-label">視訊上傳</label>
               <div class="col-md-5">
                  <span style='color:blue;'>(支援'3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav'格式)</span>
                    <input type="file" class="file" name="file">
                </div>       
    </form>
 

<script src="../fileupload/jquery.ui.widget.js"></script>
<script src="../fileupload/jquery.iframe-transport.js"></script>
<script src="../fileupload/jquery.fileupload.js"></script>
<script src="../fileupload/jquery.xdr-transport.js"></script>
<script src="../fileupload/jquery.fileupload-process.js"></script>
<script src="../fileupload/jquery.fileupload-validate.js"></script>
<script>
 

$(".file").fileupload({
        url : "${context}/admin/video/upload/save",
        dataType : "json",
        acceptFileTypes: /(\.|\/)(3gp|flv|rmvb|mp4|wmv|avi|mkv|mp3|wav)$/i,
        maxFileSize: 500 * 1024 * 1024,
        minFileSize: 5,
        messages: {
            maxFileSize: '檔案上傳的最大大小為 500MB',
            acceptFileTypes: '此檔案是不支援的視訊格式'
        },
        formData : function (from) {
 //當上傳檔案時需要傳遞其他引數時 可以通過以下方式進行賦值傳遞
 

            return [{name : "deviceCode",value : $('input[name="deviceCode"]').val()},
                {name : "type",value : $("select").val()}]
        },
        done : function(e, data){//當檔案上傳成功後呼叫這個回撥函式
          console.log(data)
        },

        processfail: function (e, data) { //根據的定義的校驗規則進行檔案檢驗
            var currentFile = data.files[data.index];
            if (data.files.error && currentFile.error) {
              console.log(currentFile.error)
        }
   })

</script>

<!-- 上傳檔案攔截，設定最大上傳檔案大小   500M=500*1024*1024(B)=524288000 bytes -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize" value="${web.maxUploadSize}" />
	</bean>

 @RequestMapping("/save")
    @ResponseBody
    public Result save(@RequestParam MultipartFile file, @RequestParam  String deviceCode, @RequestParam int type, HttpServletRequest request)
    {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddhhmmss");

        Result result = new Result();

        try {

            String  fileName = file.getOriginalFilename();

            String extName = fileName.substring(fileName.lastIndexOf("."));

            String newFileName = deviceCode + "_" + type + "_" + sdf.format(new Date())  + extName;

            File newFile = new File(request.getSession().getServletContext().getRealPath("/opt/video/todo/"));

            if (! newFile.exists()) newFile.mkdirs();

            newFile = new File(newFile, newFileName);

            OutputStream out = new FileOutputStream(newFile);

            out.write(file.getBytes());
            out.flush();
            out.close();

        } catch (IOException e) {

            e.printStackTrace();
            result.setError(e);
        }

        result.setData("操作成功");

        return result;
    }