Если вы не знаете конфигурацию Bootstrap-Fileinput, вы можете проверить официальный веб-сайт: http://plugins.krajee.com/file-input.
Логическое описание: сначала получите отображение данных из фона, а затем отредактируйте его.
Без лишних слов просто загрузите код.
1. Код частей страницы:
<div> <label for = "inputemail3"> логотип проекта </label> <div> <input id = "testlogo" type = "file" name = "icofile"/> <input type = "text" name = "htestlogo" id = "htestlogo" onchange = "addFile (this)"> </div> </div>
ПРИМЕЧАНИЕ. Где OnChange () требуется для моего бизнеса, и событие с добавлением будет автоматически выполнено после завершения загрузки. Этот метод может быть удален.
2. Получите метод данных инициализации:
// Инициализировать, чтобы получить исходный файл $ (function () {$ .ajax ({type: «post», url: "/eim/project/testfileupload.do", datatype: "json", успех: function (data) {layer.msg ('Operections! ОшибкаОписание: Здесь я возвращаю массив объектов: список <memberuser>, который можно понимать как получение всех учащихся в классе и отображая аватары
3. Инициализируйте компонент Bootstrap-Fileinput:
Функция ShowPhotos (DJSON) {// Возврат строки JSON в объект JSON в фоне var redata = eval (djson); // Предварительный просмотр изображения JSON Data Group var prelist = new Array (); for (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // Здесь мы ссылаемся на суждение. fa-file-o Text-info '> </i> </span> </div> </div> "} else {// prelist типа изображения [i] =" <img src =/"/eim/upload/getimg.do? savePath ="+array_element.fileidfile.filepath+"& likelement.maleme.malem. class =/"file-preview-image/"> "; }} var previewjson = prelist; // данные конфигурации, соответствующие группе данных JSON предварительного просмотра выше VAR PRECONFIGLILLEST = new Array (); for (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {Подпись: array_element.fileidfile.filename, // отображаемое имя файла ширина: '120px', url: '/eim/project/deletefile.do', // Удалить ключ URL: array_element.id, // удалить параметр, переданный AJAX на фоне фон: {идентификатор. preconfiglist [i] = tjson; } // Запросить конкретные параметры на себе. FileInput ({uploadUrl: '/eim/upload/uploadfile.do', uploadAsync: true, showcaption: true, showupload: true, // отображается ли кнопка загрузки, есть входная кнопка, // отображать, как поля истинна, ятовина/// with -butfotion, // with -buttone, как выставка/// show -button, как входная кнопка/// show, является ли входная кнопка: ShowPreview: True, ShowCancel: True, DropzoneEnabled: false, maxfilecount: 10, piritypreviewshowdelete: true, msgfilestoomany: «Выберите количество загруженных файлов превышает максимальное допустимое значение! PreviewFileIconsettings: {'ocx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>', 'pdf': '<i> </i>', 'Zip': '</i>', 'sql': '</i>' initialPreviewConfig: preconfiglist}). Off ('filePreupload'). On ('filePreupload', function () {// alert (data.url);}). On ("fileUploaded", функция (Event, RuftAta) {// Данные возвращались после того, как файл успешно выгружается, здесь я сохранен идентификатор. STURNATA.Response.id; }4. Бэкэнд Java сохраняет часть кода файла
@RequestMapping (value = "/uploadfile", method = requestMethod.post) @Responsebody public oploadfile (httpservletrequest, httpservletresponse response) thripting servletexception, ioexception {// convertectrequestequestequestequestequestequest {// multipcortectretectretectestectretectestequestequestequestequestequeste (MultiparthttpservletRequest) запрос; // Получить файл в карту карты карты <string, multipartfile> fileMap = multipRtequest.getFileMap (); // Получение параметра пути, пройденного с помощью Page folderPath = request.getParameter ("folder"); String rootpath = baseconfig.uploadpath; String filePath = rootPath + folderPath + "/"; // Загрузить файл и вернуть контейнер карты, карта хранит информацию о файле filemodel filemodel = uploadifyutils.uploadfiles (filepath, filemap); логический флаг = service.add (filemodel); if (flag) {string result = fileModel.getId ()+";"+fileModel.getFilePath ()+";"+fileModel.getName ()+";"+fileModel.getFilePath (); MAP MAP = NEW HASHMAP <> (); map.put ("id", filemodel.getid ()); // вернуть файл Сохранить идентификатор //response.getWriter().write(map); карта возврата; } return null; }Примечание. Этот код получает часть информации загруженного файла, такой как имя файла, загруженный путь и т. Д., И сохраняет информацию о файле в таблице, а соответствующий объект является FileModel.
5. Обновить компонент после завершения загрузки.
Окончательный эффект отображения:
Примечание. Здесь мы ссылаемся на суждение типа файла TXT. Для остальной части DOC и PPT есть соответствующие значки отображения. Вам нужно добавить соответствующий стиль только при определении того, судить ли.
Приложение: в соответствии с Path Past/Coad File Code:
/** * Загрузка файла * * @param SavePath * Save Directory * @param name * исходный файл * Имя при сохранении содержит суффикс * @param запрос * @param response * @return */public Static String Down (String SavePath, String name, String fileName, httpservletrequest, httpservelcese response) {tress name neme nemement + "/" name nemement + "; File file = new File (path); if (! file.exists ()) {// request.setattribute ("name", filename); return "Download_Error"; // возвращать файл загрузки не существует} response.setContentType ("Приложение/Octet-Stream"); // Установить заголовок ответа string userAgent = request.getheader ("user-agent"). Tolowercase (); if (useragent.indexof ("msie")! = -1) {// ie browser // System.out.println ("IE Browser"); response.addheader ("Содержимое-распределение", "Приложение; filename =" + urlencoder.encode (name, "utf-8")); } else {response.addheader ("content-disposition", "Attachment; filename =" + new String (name.getBytes ("utf-8"), "iso8859-1")); } response.addheader ("content-guide", "" + file.length ()); // Загрузите файл в форме потока InputStream fis = new BufferedInputStream (new FileInputStream (path)); byte [] buffer = new Byte [fis.aveable ()]; fis.read (buffer); fis.close (); //response.setContentType("image/* "); // Установить возвратный файл тип outpertstream toclient = response.getOutputStream (); OutputStream bos = new BufferedOutputStream (ToClient); // bufferedwriter bw = new Bufferedwriter (New outputStreamWriter (BOS)); Bos.Write (буфер); //bw.close (); bos.close (); toclient.close (); вернуть ноль; } 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, multiplaRtfile> fileMap) {// загружать файл // объект модели прикрепления fileModel fm = new fileModel (); try {file file = new File (savePath); // Определите, существует ли папка, и если она не существует, создайте папку MADEDIR (файл); if (fileMap! = null) {for (map.Entry <string, multipArtFile> entity: fileMap.EntrySet ()) {MultipArtFile f = entity.getValue (); if (f! = null &&! f.isempty ()) {string uuid = uploaduitils.getuuid (); // uuid - это имя файла при сохранении string ext = uploaduitils.getfileext (f.getoriginalfilename ()); // get file suffix // save file = newfile = new File (savePath+"/u elect file); f.transferto (newfile); fm.setfilename (f.getoriginalfilename ()); fm.setname (uuid+"."+ext); fm.setFilePath (savePath); // Сохранить путь fm.setext (ext); fm.setize (f.getSize ()); }} return fm; } catch (Exception e) {log.error (e); вернуть ноль; }}Выше приведено загрузка и редактирование FileInput в Bootstrap, представленном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!