GWT - FileUpload Widget
introduzione
Il FileUploadwidget avvolge l'elemento HTML <input type = 'file'>. Questo widget deve essere utilizzato con FormPanel se deve essere inviato a un server.
Dichiarazione di classe
Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.FileUpload classe -
public class FileUpload
extends Widget
implements HasName, HasChangeHandlers
Regole di stile CSS
Le seguenti regole di stile CSS predefinite verranno applicate a tutto il widget TextBox. Puoi sovrascriverlo secondo le tue esigenze.
.gwt-FileUpload {}
Costruttori di classi
Sr.No. | Costruttore e descrizione |
---|---|
1 | FileUpload() Costruisce un nuovo widget per il caricamento dei file. |
2 | FileUpload(Element element) Questo costruttore può essere utilizzato dalle sottoclassi per utilizzare esplicitamente un elemento esistente. |
Metodi di classe
Sr.No. | Nome e descrizione della funzione |
---|---|
1 | HandlerRegistration addChangeHandler(ChangeHandler handler) Aggiunge un gestore ChangeEvent. |
2 | java.lang.String getFilename() Ottiene il nome del file selezionato dall'utente. |
3 | java.lang.String getName() Ottiene il nome del widget. |
4 | boolean isEnabled() Ottiene se questo widget è abilitato. |
5 | void onBrowserEvent(Event event) Attivato ogni volta che viene ricevuto un evento del browser. |
6 | void setEnabled(boolean enabled) Imposta se questo widget è abilitato. |
7 | void setName(java.lang.String name) Imposta il nome del widget. |
8 | static FileUpload wrap(Element element) Crea un widget FileUpload che racchiude un elemento <input type = 'file'> esistente. |
Metodi ereditati
Questa classe eredita i metodi dalle seguenti classi:
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object
Esempio di widget FileUpload
Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget FileUpload in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -
Passo | Descrizione |
---|---|
1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione . |
2 | Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni invariato il resto dei file. |
3 | Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata. |
Di seguito è riportato il contenuto del descrittore del modulo modificato src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>
Di seguito è riportato il contenuto del file del foglio di stile modificato war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-FileUpload {
color: green;
}
Di seguito è riportato il contenuto del file host HTML modificato war/HelloWorld.html.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>FileUpload Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>
Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del widget FileUpload.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.FormPanel.SubmitCompleteEvent;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
VerticalPanel panel = new VerticalPanel();
//create a FormPanel
final FormPanel form = new FormPanel();
//create a file upload widget
final FileUpload fileUpload = new FileUpload();
//create labels
Label selectLabel = new Label("Select a file:");
//create upload button
Button uploadButton = new Button("Upload File");
//pass action to the form to point to service handling file
//receiving operation.
form.setAction("http://www.tutorialspoint.com/gwt/myFormHandler");
// set form to use the POST method, and multipart MIME encoding.
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setMethod(FormPanel.METHOD_POST);
//add a label
panel.add(selectLabel);
//add fileUpload widget
panel.add(fileUpload);
//add a button to upload the file
panel.add(uploadButton);
uploadButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
//get the filename to be uploaded
String filename = fileUpload.getFilename();
if (filename.length() == 0) {
Window.alert("No File Specified!");
} else {
//submit the form
form.submit();
}
}
});
form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
@Override
public void onSubmitComplete(SubmitCompleteEvent event) {
// When the form submission is successfully completed, this
//event is fired. Assuming the service returned a response
//of type text/html, we can get the result text here
Window.alert(event.getResults());
}
});
panel.setSpacing(10);
// Add form to the root panel.
form.add(panel);
RootPanel.get("gwtContainer").add(form);
}
}
Una volta che sei pronto con tutte le modifiche fatte, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:
Di seguito è riportato lo snippet di codice della pagina del server java che dimostra la capacità lato server per il caricamento di file. Stiamo utilizzando le librerie Common IO e Commons FileUpload per aggiungere funzionalità di caricamento dei file alla pagina laterale del server. Il file verrà caricato nella cartella uploadFiles relativa alla posizione in cui upload.jsp si trova sul lato server.
<%@page import = "org.apache.commons.fileupload.FileItemFactory"%>
<%@page import = "org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import = "org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import = "org.apache.commons.fileupload.FileItem"%>
<%@page import = "org.apache.commons.io.FilenameUtils"%>
<%@page import = "java.util.List"%>
<%@page import = "java.util.Iterator"%>
<%@page import = "java.io.File"%>
<%@page import = "java.io.FileOutputStream"%>
<%@page import = "java.io.InputStream"%>
<%
// Create a factory for disk-based file items
FileItemFactory factory = new DiskFileItemFactory();
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
try {
// Parse the request
List items = upload.parseRequest(request);
// Process the uploaded items
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
//handling a normal form-field
if(item.isFormField()) {
System.out.println("Got a form field");
String name = item.getFieldName();
String value = item.getString();
System.out.print("Name:"+name+",Value:"+value);
} else {
//handling file loads
System.out.println("Not form field");
String fieldName = item.getFieldName();
String fileName = item.getName();
if (fileName != null) {
fileName = FilenameUtils.getName(fileName);
}
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();
System.out.print("Field Name:"+fieldName +",File Name:"+fileName);
System.out.print("Content Type:"+contentType
+",Is In Memory:"+isInMemory+",Size:"+sizeInBytes);
byte[] data = item.get();
fileName = getServletContext()
.getRealPath( "/uploadedFiles/" + fileName);
System.out.print("File name:" +fileName);
FileOutputStream fileOutSt = new FileOutputStream(fileName);
fileOutSt.write(data);
fileOutSt.close();
out.print("File Uploaded Successfully!");
}
}
} catch(Exception e){
out.print("File Uploading Failed!" + e.getMessage());
}
%>