Recientemente, estoy escribiendo mi propio sitio web personal, el marco Bootstrap utilizado en la parte delantera. Cuando logré la función de carga de las imágenes, encontré un complemento de entrada marco de carga basado en bootstrap en Internet. Este complemento es muy consistente con mi vista estética, por lo que registraré brevemente el uso de este complemento.
Primero, introduzca archivos de complemento CSS y JS de acuerdo con la ruta de su proyecto
Tenga en cuenta que los archivos de lenguaje local se introducen después del archivo FileInput.min.js
<
Luego está el código HTML porque no soy un front-end profesional, por lo que el código frontal es muy malo y ligeramente chorreado y golpeado
< style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><button type="button" data-dismiss="modal" aria-hidden="true"> <span style="white-space:pre"> </span>× <span style = "White-Space: pre"> </span> </boton> <span style = "White-space: pre"> </span> <h3 id = "mymodallabel" align = "centro"> <span style = "white-space: pre"> </span> <b> Información de puntaje de música agregada </b> <span style = "space blanco: pre"> </span> </h3> <b span </span> </div> <span style = "white-space: pre"> </span> <div> <span style = "white-space: pre"> </span> <form de formato = "addForm" rol = "form" enctype = "multipart/formy-data"> <span style = "white-space: pre"> </div> <divs> <span span <pan <span <span <span <span <span <span <span <span n. style = "White-Space: Pre"> </span> <span style = "White-space: pre"> </span> <input type = "text" id = "scorename" name = "scorename" poskoleñero = ""> <span style = "white-space: pre"> </span> </div> <span span style = "space blanco: pre"> </span style = "exhibición: inline-table; 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span> Score type</span> <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 = "White-Space: pre"> </span> <span span style = "white-space: pre"> </span> <span spany = "white-space: pre"> </span> </div> <span span style = "white-space: pre"> </span> <span span style = "white-space: pre"> </span> <play style = "white-space: pre"> </span> <iv style = "visual 10px; margin-left: 90px; "> <span style =" white-space: pre "> </span span style =" white-space: pre "> </span> <span style =" white-space: pre "> </span> <span span style =" white-space: pre "> </span> <input type =" text "id =" name de dificultad = "dificultad"> <span style = "White-space white space style = "White-Space: Pre"> </span> </iv> <span span style = "White-space: pre"> </span> <div style = "margin-top: 10px;"> <span span style = "White-space: pre"> </span> <span span style = "white-space: pre"> </////span span span spane </span span </span span </span </span </span span> </span span </span </span span> </span span spane> style = "White-Space: Pre"> </span> <input type = "text" id = "tune" name = "tune"> <span style = "white-space: pre"> </span> </div> <span span style = "white-space: pre"> </span> <div> <span style = "White-space: pre"> <//input id = "fileup" type = "span span style" <span span span style "<span span swy </div> <span style = "White-Space: pre"> </span> </form> <span style = "white-space: pre"> </span> </div> <span style = "white-space: pre"> </span> </div> <span style = "white-space: pre"> </span> <div> <divy style = "white-space: pre"> </span> <span type = "button =" Botton "Botton" data-dismiss = "modal"> cerrar <span style = "white-space: pre"> </span> </boton> <span style = "white-space: pre"> </span> <!-<span style = "white-space: pre"> </span> <!-<span spank style = "white-space: pre" >> </div> <span span span span: pre span> <///span span /..modal-Content-> <span style = "White-Space: pre"> </span> </div> <!-/.modal-> <span style = "white-space: pre"> </span> </div>
Entonces el código JS inicializa la entrada de archivo
// Inicializar la función FileInput Control (Primera inicialización) initFileInput (ctrlname, uploadUrl) {var control = $ ('#' + ctrlname); control.fileInput ({lenguaje: 'zh', // Establezca el idioma uploadUrl: uploadUrl, // dirección cargada permitidafileExtensions: ['jpg', 'png', 'gif'], // recibió el sufre de archivo showupload: true, // el botón showcaption: falso, // hace el título browser browser browserclassclassClassClassClassClassClassClassClassClassClass. // Button Style PreviewFileicon: "<I class = 'Glyphicon Glyphicon-King'> </i>", uploadAsync: false, uploadeXtradata: function (previsual, index) {var obj = {}; $ (this) .val (); } // Inicializar fileInput initFileInput ("fileUp", http: // localhost: 8080/web/guita/addGuitainfo.action);Este código es el núcleo del complemento
uploadUrl es la ruta de acceso dada por el fondo
Este es un párrafo especial aquí
UPLoadExtradata: function (PreviewID, index) {var obj = {}; $ ('#addform'). find ('input'). Cada (function () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); regresar obj; }Este código UploadExtradata es adecuado para pasar parámetros adicionales que se pueden usar para enviar formularios de formulario para otros datos de cuadro de entrada.
UploadExtradata: {Tipo: "Tipo", Tune: "Tune"}En general, los datos estáticos se pueden recibir directamente como se muestra en la figura anterior. Sin embargo, si lo escribe así, no obtendrá datos dinámicos. Los datos solo se generarán una vez durante la inicialización y no cambiarán.
He estado confundido sobre este problema durante mucho tiempo. Finalmente, leí las discusiones de amigos extranjeros en GIT y luego me refiero a la API para resolverlo.
Después de escribirlos, puedes ver las representaciones
El estilo sigue siendo muy bueno. Haga clic para cargarlo y los datos completos se enviarán al fondo.
Muchas de las aplicaciones enchufables que encontré en línea están integradas con PHP. Lo escribí en Java. Aquí también fui al código recibido en segundo plano. SpringMVC Framework es muy conveniente para recibir datos.
De esta manera, se pasan los parámetros de datos y los parámetros de imagen, y el fondo llama al código cargado por el archivo para guardar la imagen
Hay muchos usos que vale la pena estudiar para este complemento. Aquí solo hablo brevemente sobre cómo usarlo y completo la transmisión de datos dinámicos. Los amigos que acaban de entrar en contacto con este complemento pueden hacer una breve referencia.
He introducido mucho sobre el método de Bootstrap para cargar imágenes utilizando el complemento de entrada de archivo. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!