概述 在網(wǎng)頁(yè)開發(fā)中，上傳文件是一個(gè)常見的需求。然而，不同瀏覽器對(duì)于文件路徑的顯示方式有所不同。由于安全考慮，現(xiàn)代瀏覽器已經(jīng)不再顯示文件的完整路徑，只會(huì)顯示文件名。但是這并不意味著無(wú)法進(jìn)行文件上傳。在

概述

在網(wǎng)頁(yè)開發(fā)中，上傳文件是一個(gè)常見的需求。然而，不同瀏覽器對(duì)于文件路徑的顯示方式有所不同。由于安全考慮，現(xiàn)代瀏覽器已經(jīng)不再顯示文件的完整路徑，只會(huì)顯示文件名。但是這并不意味著無(wú)法進(jìn)行文件上傳。在Spring MVC中，我們可以使用CommonsMultipartFile對(duì)象與頁(yè)面上的表單進(jìn)行綁定，然后將文件上傳至服務(wù)器的臨時(shí)文件緩存區(qū)，最后將緩存寫入指定位置。

使用Uploadify插件實(shí)現(xiàn)異步上傳

在Spring MVC中，我們可以借助第三方插件Uploadify來(lái)實(shí)現(xiàn)異步上傳多個(gè)文件。

準(zhǔn)備工作

首先，我們需要引入jQuery和Uploadify插件的相關(guān)文件。

lt;script src"jquery.js"gt;lt;/scriptgt;
lt;script src"uploadify/jquery.uploadify.min.js"gt;lt;/scriptgt;
lt;link rel"stylesheet" type"text/css" href"uploadify/uploadify.css"gt;

HTML代碼

接下來(lái)，在HTML中添加一個(gè)文件上傳的input元素和兩個(gè)按鈕用于觸發(fā)上傳和取消上傳的操作。

lt;input type"file" id"file_upload"gt;
lt;input type"button" value"上傳" onclick"javascript:$('#file_upload').uploadify('upload', '*');"gt;
lt;input type"button" value"取消上傳" onclick"javascript:$('#file_upload').uploadify('cancel', '*');"gt;

JavaScript代碼

在頁(yè)面加載完畢后，我們通過(guò)JavaScript初始化Uploadify插件。

lt;scriptgt;
$(function() {
    $('#file_upload').uploadify({
        auto:false, //設(shè)置不自動(dòng)上傳
        swf:'uploadify/uploadify.swf', //swf文件位置
        uploader:'uploadFile.jhtml', //文件上傳地址
        height:32, //“瀏覽”按鈕的高度
        width:50, //“瀏覽”按鈕的寬度
        fileObjName:'anyFile', //將要上傳的文件對(duì)象的名稱
        fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;', //允許上傳的文件后