Bootstrap-FileInputの構成がわからない場合は、公式Webサイトhttp://plugins.krajee.com/file-inputを確認できます。
論理的な説明：最初にバックグラウンドからデータ表示を取得し、編集します。
これ以上苦労せずに、コードをアップロードするだけです。
1。ページコードの一部：
<div> <label for = "inputemail3">プロジェクトロゴ</label> <div> <input id = "testlogo" type = "file" name = "icofile"/> <入力タイプ= "text" name = "htestlogo" id = "htestlogo" onchange = "addfile（this）>
注：onChange（）が私のビジネスで必要であり、アップロードが完了した後に追加イベントが自動的に実行されます。この方法は削除できます。
2。初期化データ方法を取得します。
//初期化して元のfile $（function（）{$ .ajax（{type： "post"、url： "/eim/project/testfileupload.do"、datatype： "json"、cuscess：function（data）{layer.msg（ 'Operation suceds！'）; TextStatus、erser.msg（ '操作が失敗！'）}）;説明：ここでは、オブジェクト配列を返します：リスト<membersuser>。これは、すべての学生をクラスに入手してアバターを表示すると理解できます
3。Bootstrap-FileInputコンポーネントを初期化します。
関数showphotos（djson）{// json文字列をバックグラウンドのjsonオブジェクトに戻しますvar redata = eval（djson）; //画像JSONデータグループvar Prerist = new Array（）をプレビューします。 for（var i = 0; i <redata.length; i ++）{var array_element = redata [i]; //ここで、.txtの判断を参照し、残りを自分に追加します（array_element.fileidfile.name.indexof（ "txt"）> 0）{//非画像タイプのプレリスト[i] = "<div class = 'file-preview-other-frame'> <div class = 'class'> fa-file-text-o text-info '> </i> </span> </div> </div> "} else {//画像タイプPrerist [i] =" <img src =/"/eim/upload/getimg.do？savepath ="+array_element.fileidfile.filepath+" class =/"file-preview-image/"> "; }} var previewjson = Prerist; // var preconfiglist = new Array（）上のプレビュー画像のJSONデータグループに対応する構成データ; for（var i = 0; i <redata.length; i ++）{var array_element = redata [i]; var tjson = {caption：array_element.fileidfile.filename、//表示されているファイル名幅： '120px'、url： '/eim/project/deletefile.do'、// delete url key：array_element.id、// deleteは、パラメーターをパラメーターに合格します。 preconfiglist [i] = tjson; } //自分で特定のパラメーターを照会します。fileinput（{uploadurl： '/eim/upload/uploadfile.do'、uploadasync：true、showcaption：true、showupload：true、// uploadボタンが表示されるかどうか、showRemove：false、showcaption：showised、 showpreview：true、showcancel：true、dropzoneEnabled：false、maxfilecount：10、initialpreviewshowdelete：true、msgfilestoomany： "firitionpreview：previewjson、previewfileicon： '<i> <i> <i> preoviewtepes：previewjson、previewfilecon：previewjson、previewjson、previewjson、previewjson、previewjson、previewjson、previewjson、previewjson PreviewFileConsettings：{'docx'： '<i> </i>'、 'xlsx'： '<i> </i>'、 'pptx'： '<i> </i>'、 'pdf'： '<i> </i>'、 'zip'： '<i> </i> preconfiglist}）。off（ 'filepreupload'）。対応する入力割り当て$（ '＃htestlogo'）。 }4.バックエンドJavaは、ファイルコードの一部を保存します
@RequestMapping（value = "/uploadFile"、method = requestmethod.post）@responsebody public object uploadfile（httpservletrequest request、httpservletresponse応答）Servletexception、ioexception {// MultiParthttttttptsttrecretretretretrecretrequest = Multiparthtttttptretreletrequest = Multiparthtttttttttptretretretrecrequest {// Convert （MultiParthttpservletrequest）リクエスト; //ファイルをマップコンテナマップ<文字列、multipartfile> filemap = multipartrequest.getfilemap（）; //ページFolderPath = request.getParameter（ "Folder"）によって渡されたパスパラメーターを取得します。 string rootpath = baseconfig.uploadpath;文字列filepath = rootpath + folderpath + "/"; //ファイルをアップロードしてマップコンテナを返し、マップはファイル情報FileModel fileModel = uploadifyutils.uploadfiles（filepath、filemap）を保存します。 boolean flag = service.add（filemodel）; if（flag）{string result = filemodel.getId（）+";"+filemodel.getFilepath（）+";"+filemodel.getName（）+";"+filemodel.getFilepath（）;マップマップ= new Hashmap <>（）; map.put（ "id"、filemodel.getid（））; //ファイルを返しますid //response.getwriter( ).write(map）;マップを返します。 } nullを返します。 }注：このコードは、ファイル名、アップロードされたパスなど、アップロードされたファイルの情報の一部を取得し、ファイル情報をテーブルに保存し、対応するオブジェクトはFileModelです。
5.アップロードが完了したら、コンポーネントを更新します。
最終的なディスプレイ効果：
注：ここでは、TXTファイルタイプの判断を参照してください。 DocとPPTの残りの部分には、対応する表示アイコンがあります。判断するかどうかを決定するときに、対応するスタイルを追加するだけです。
添付ファイル：ファイルコードを過去/ダウンロードするパスによると：
/**ファイルダウンロード * * @param SavePath * Save Directory * @Param Name * Original File *保存時の名前は接尾辞 * @Param Request * @return */public Static String Down（String SavePath、String name、String filename、HttpservletRequestリクエスト、httpservletresponse {httpservletresponse {try {try {saien + " +" + " +" + file file = new file（path）; if（！file.exists（））{// request.setattribute（ "name"、filename）; 「download_error」を返します; //応答のヘッダー文字列useragent = request.getheader（ "user-agent"）。tolowercase（）を設定します。 if（useragent.indexof（ "msie"）！= -1）{// ie browser // system.out.println（ "ie browser"）; Response.Addheader（ "Content-Disposition"、 "Attachment; filename =" + urlencoder.encode（name、 "utf-8"））; } else {response.addheader（ "content-disposition"、 "attachment; filename =" + new String（name.getBytes（ "utf-8"）、 "ISO8859-1"））; } Response.Addheader（ "Content-Length"、 "" + file.length（））; // stream inputstream fis = new BufferedInputStream（new FileInputStream（PATH））の形式でファイルをダウンロードします。 byte [] buffer = new byte [fis.abailable（）]; fis.read（buffer）; fis.close（）; //response.setContentType("image/* "）; // returnファイルタイプを設定しますoutputStream bos = new BufferedOutputStream（toClient）; // bufferedwriter bw = new BufferedWriter（new outputStreamWriter（BOS））; bos.write（バッファー）; //bw.close（）; bos.close（）; toclient.close（）; nullを返します。 } catch（Exception e）{e.printstacktrace（）; //response.reset（）; "exception"; //例外ページに戻る}最後に{/* if（toclient！= null）{try {toclient.close（）; } catch（ioexception e）{e.printstacktrace（）; }}*/}}添付：
uploadifyutils.uploadfilesコードの一部
public static filemodel uploadFiles（String SavePath、Map <String、MultipArtFile> FileMap）{//ファイルのアップロード//添付モデルオブジェクトFILEMODEL FM = new FileModel（）; try {file file = new file（savepath）; //フォルダーが存在するかどうか、およびそれが存在しない場合は、フォルダーmakedir（file）を作成します。 if（filemap！= null）{for（map.entry <string、multipartfile> entity：filemap.entryset（））{multipartfile f = entity.getValue（）; if（f！= null &&！f.isempty（））{string uuid = uploadifyutils.getuuid（）; // uuidはstring ext = uploadifyutils.getFileName（f.getoriginalfileName（）; F.Transferto（NewFile）; fm.setfileName（f.getoriginalFileName（））; fm.setname（uuid+"。"+ext）; fm.setfilepath（savepath）; // path f.setext（ext）; fm.setsize（f.getsize（））; }} fmを返します。 } catch（例外e）{log.error（e）; nullを返します。 }}上記は、編集者が紹介したBootstrapのFileInputのアップロードと編集です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！