Недавно я пишу свой собственный личный веб -сайт, Bootstrap Framework, используемая на передней части. Когда я достиг функции загрузки изображений, я обнаружил, что образец загрузки изображения на основе загрузки в Интернете в Интернете. Этот плагин очень согласуется с моим эстетическим представлением, поэтому я кратко запишу использование этого плагина.
Во -первых, ввести плагины CSS и JS -файлы в соответствии с вашим пути проекта
Обратите внимание, что языковые файлы локали вводятся после файла fileInput.min.js
<!-Ввод файла-> <link href = "../../ css/fileInput.min.css" rel = "styleSheet"> <script src = "../../ js/fileInput.min.js"> </script> <script src = "../../ js/zh.js" type> <sript src = "../ js/zh.js"
Тогда есть HTML-код, потому что я не профессиональный фронт, так что код переднего дня очень плохой, слегка впрыскивает и нажимает
<!-Modal Box (modal)-> <span style = "Белое пространство: pre"> </span> <div id = "mymodal" tabindex = "-1" role = "Dialog" Aria-labelledby = "mymodallabel" aria-hidden = "true"> <span style = white-space: pre "> </span> <dip> <dip> <span style =" white-spane = white-spane = "span> <dip> <span> <pran> <pran> <pran> <pran> <pran> <pran> <pran> <pran> <pran> <pran> <pran>. Style = "Белое пространство: pre"> </span> <div> <span style = "Белое пространство: pre"> </span> <div> <span style = "Белое пространство: pre"> </span> <div> <span style = "Белое пространство: pre"> </span> <button-type = "button" data-dismiss = "modal" aria-hidden = "> <span style =" white-spane = "/pre-span"> </span style = "> </span Span"> <Span style = "> </span Span"> <Span style = "/" span span? Style = "Белое пространство: pre"> </span> </button> <span style = "Белое пространство: pre"> </span> <h3 id = "mymodallabel" Align = "center"> <span style = "Белое пространство: pre"> </span> <b> Добавлена информация о музыке </b> <span ylect = "white-space: pre"> </span> </h3> </b> </b> <span = white-space: pre »> </span> </h3> </b-space: pre-space: pre»> </h3> </b-space. </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><form id="addForm" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span> <span> Score name</span> <span style = "Белое пространство: pre"> </span> <span style = "Белое пространство: pre"> </span> <input type = "text" id = "scorename" name = "scorename" Placeholder = ""> <span style = "Белое пространство: pre"> </span> </div> <span style = "белый space: pre"> </span> <div style = in in in in in in in in in in in in in in in-top: in in in in in in in in in style-top: 10px; "> <span style =" Белое пространство: pre "> </span> <span style =" Белое пространство: pre "> </span> <pan> тип оценки </span> <span style =" Белое пространство: pre "> </span> <span style =" Белое пространство: pre "> </span> <span style =" белый пространство: pre "> </span> <pran style =" span> </span> </span style: "span> </span style:" span> </span style: "span> </span style: white-space: white-space:> </span style. Style = "Белое пространство: pre"> </span> <span style = "Белое пространство: pre"> </span> <span style = "белое пространство: pre"> </span> </div> <span style = "Белое пространство: pre"> </span> <span style = "белое пространство: pre"> </span> style = "white-space: pre"> </span> <div style = "in in in style = in in in in in in in strine-table =" div style = "div style = in in in in in in strine in style = in in in in style in style = 10px;margin-left: 90px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="difficulty" name="difficulty"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div style="margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style = "Белое пространство: pre"> </span> <input type = "text" id = "tune" name = "tune"> <span style = "белое пространство: pre"> </span> </div> <span style = "белое пространство: pre"> </span> <div> <span style = "Белый пространство: pre"> </span> <input yd = "file =" файл "/> <play style ="> </span> <input id = " </div> <span style = "Белое пространство: pre"> </span> </form> <span style = "Белое пространство: pre"> </span> </div> <span style = "Белое пространство: pre"> </span> </div> <span style = "Белое пространство: pre"> </span> <div> <span style = "White Space: Pre"> </span> </span> <div> <span style = "white space: pre"> </span> <bute = "button =" button = "" Div> "span =" Pre "> </span> <bute =" boon> ". data-dismiss = "modal"> close <span style = "Белое пространство: pre"> </span> </button> <span style = "белое пространство: pre"> </span> <!-<span style = "Белое пространство: pre"> </span> <!-<span style = "Белое пространство: pre"> </span> </div> <span> "white-space: pre"> </span> </div> <span = "span> </span> </span> </div> <span =" span> /.modal-content-> <span style = "Белое пространство: pre"> </span> </div> <!-/.modal-> <span style = "Белое пространство: pre"> </span> </div>
Затем код JS инициализирует вход файла
// инициализировать функцию FileInput Control (First инициализация) initFileInput (ctrlName, uploadUrl) {var control = $ ('#' + ctrlname); control.fileinput ({ranguage: 'zh', // установить язык uploadurl: uploadurl, // загруженный адрес разрешенные файлы Style PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>", uploadasync: false, uploadextradata: function (previewId, index) {var obj = {}; $ (это) .val (); } // инициализировать FileInput initFileInput ("fileUp", http: // localhost: 8080/web/guita/addguitainfo.action);Этот код является ядром плагина
uploadUrl - это путь доступа, данное на фоне
Это особый абзац здесь
uploadextradata: function (previewid, index) {var obj = {}; $ ('#addform'). Найти ('input'). Каждый (function () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); вернуть OBJ; }Этот код uploadextradata подходит для передачи дополнительных параметров, которые можно использовать для подачи форм форм для других данных ввода.
uploadextradata: {type: "type", tune: "tune"}Как правило, статические данные могут быть непосредственно получены, как показано на рисунке выше. Однако, если вы напишете это так, вы не получите динамические данные. Данные будут генерироваться только один раз во время инициализации и не будут изменяться.
Я был смущен этой проблемой много времени. Наконец, я прочитал обсуждения иностранных друзей на GIT, а затем ссылаюсь на API, чтобы решить его.
После написания их, вы можете увидеть визуализации
Стиль все еще очень хороший. Нажмите, чтобы загрузить его, и все данные будут отправлены на фон.
Многие из подключаемых приложений, которые я нашел в Интернете, интегрированы с PHP. Я написал это на Java. Здесь я также пошел в код, полученный в фоновом режиме. Структура SpringMVC очень удобна для получения данных.
Таким образом, параметры данных и параметры изображения передаются, и фоновый вызов код загруженный файлом для сохранения изображения
Для этого плагина стоит много использования. Здесь я просто кратко говорю о том, как его использовать и завершить передачу динамических данных. Друзья, которые только что вступили в контакт с этим плагином, могут сделать краткую ссылку.
Я так много представил о методе загрузки изображений Bootstrap с использованием плагина файла ввода. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!