1. 程式人生 > >如何在前端選擇本地圖片並上傳

如何在前端選擇本地圖片並上傳

      好懶。。。。。

     先寫前端的,比較簡易的標準照片上傳方法

      <input id="ss" name="ss" type="file"/>      //這裡就這一句就可以了

這是一個可以上傳照片的input,主要在於它的type是file   具體樣式大家自己寫一個試試就知道了

    在這裡給大家一個小方式,如果你想一次上傳多張,但又不想讓他們的input全部都顯示     請參考

假設再有一個ss2的input

   $("#ss2").hide();   //先定義ss2為隱藏狀態

  $("#ss").change(function(){ //當ss的值發生變化時  change()事件  

        $("#ss2").show();   //將ss2顯示

})

      當然了。。。我這個input是放在表單裡的





後臺程式碼:

在方法裡如下:

    // 轉型為MultipartHttpRequest

     MultipartHttpServletRequest multipartRequest =(MultipartHttpServletRequest) request;


   // 獲得檔案

   MultipartFile file = multipartRequest.getFile("ss");   //這裡就是獲取你所提交的檔案,但是請注意這裡接受的都是臨時檔案,屬於不可以開啟的後期會有轉換的方法


  // 位元組型準備接收

  byte[] ss = null;


 //讀取檔案所需的

  CommonsMultipartFile cf = (CommonsMultipartFile) file


  //獲取檔案的名字,這是獲取的真實檔名,不是自定義的

  String fileName = file.getOriginalFilename();


  //tomcat的路徑獲取方式

File pathObject = new File(request.getSession().getServletContext().getRealPath("/images/" + 我自定義個資料夾名));    //具體那一部分是我就不太曉得了,建議自己親測,但是肯定能到tomcat的工作空間,我在這裡是獲得該工作空間下的images這個資料夾下的我自定義資料夾


//這是我自己的工作流程,,判斷該資料夾是否存在(images是肯定存在的,主要是判斷我自定義的)

boolean sss = pathObject.exists();


//正餐來了

// 準備存入    將檔案轉換
   InputStream is = file.getInputStream();


// 獲取檔案長度

ss = new byte[(int) file.getSize()];


// 接收

is.read(ss);


//關閉流

is.close();


// 找到臨時檔案存放點(不要忘記我說的,因為在後臺接收如果你不轉換就只能拿到臨時檔案)

DiskFileItem fi = (DiskFileItem) cf.getFileItem();


// 轉換成檔案(在這裡還是臨時檔案,臨時檔案想要轉成檔案要麼轉換,要不改檔案字尾名,知道為啥我在前面要獲取檔案的真實名了麼)

File f = fi.getStoreLocation();


//這一步我就不寫了,這不是真實檔案的轉換,在這裡我定義了檔案的儲存路徑和檔名,不想用原檔名的,請擷取獲得字尾再新增

File ff=new File(                       );   //當然這一步只是定義了路徑和檔名,還沒有建立


f.renameTo(ff);   這一句就是臨時檔案轉換成檔案


is.close();  這裡這個關閉流。。。我也不知道咋寫的,因為我是三個檔案上傳,有一口氣傳三個的判斷,有傳1,2,3的判斷,結果把流玩壞了,我也不知道咋放了,請多試試


f.delete();    刪除臨時檔案    因為我要存在工作空間,怕影響執行,臨時檔案都是刪除的