{"id":7726,"date":"2011-07-01T14:47:40","date_gmt":"2011-07-01T12:47:40","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=7726"},"modified":"2023-02-27T14:48:55","modified_gmt":"2023-02-27T14:48:55","slug":"html5-upload-di-file-piu-pulito-con-xmlhttprequest2","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/","title":{"rendered":"HTML5 – Upload di file con XMLHttpRequest 2"},"content":{"rendered":"

\"\"L’upload di file<\/strong> tramite pagine web come, ad esempio, il caricamento degli allegati ad una email, oppure le immagini da caricare in una gallery, ecc…, \u00e8 spesso tra i pensieri di molti web developers<\/strong>. Durante i primi anni del web, l’upload di file era gestito semplicemente da un form inviato ad un’altra pagina web: il browser ricaricava completamente la pagina impostata nell’action del form. Questo metodo andava, e va ancora, bene per siti semplici o istituzionali nei quali l’invio di form non \u00e8 l’aspetto essenziale a livello quantitativo per le prestazioni del software.<\/p>\n

Per quanto riguarda, invece, software pi\u00f9 complessi come web apps, gli sviluppatori hanno subito adottato nuove tecniche per la gestione dei form. Ajax<\/strong> ha cambiato il modo di realizzare software per il web<\/strong>. Il metodo classico per il caricamento di file \u00e8 stato, ed in gran parte \u00e8 ancora, l’invio del form ad un un iframe nascosto (fake ajax<\/em>), che, impostato come target contenesse \u00a0lo script server side per la manipolazione dei dati. Tramite questa procedura la pagina principale non viene ricaricata e, dunque, l’invio dei dati risulta pi\u00f9 performante rispetto al passato.<\/p>\n

Oggi voglio analizzare il prossimo passo nella gestione dei form che, grazie alle nuove tecniche HTML5 e\u00a0XMLHttpRequest 2<\/strong> permette un caricamento ancora pi\u00f9 veloce e maneggevole anche per i file.<\/p>\n

La struttura del form Html5<\/h3>\n

Ho voluto realizzare il form html5 con una struttura veramente semplice come \u00e8 bene predisporre per i primi test con le nuove tecnologie ed anche perch\u00e8 il grosso del lavoro \u00e8 gestito dal codice Js.<\/p>\n

[html]
\n<form id="form1" enctype="multipart\/form-data" method="post" action="filesystem\/upload">
\n\t<label for="fileToUpload">Seleziona i file da caricare:<\/label>
\n\t<input type="file" name="fileToUpload" id="fileToUpload" multiple \/>
\n<div id="fileInfo">&nbsp;<\/div>
\n\t<input type="submit" id="fileUpload" value="Upload" \/>
\n<div id="progressNumber">&nbsp;<\/div>
\n<\/form>
\n[\/html]<\/p>\n

L’unica minuscola particolarit\u00e0 degna di nota \u00e8 l’utilizzazione della propriet\u00e0 multiple per l’input[type=”file”]<\/em>. Grazie a questa propriet\u00e0 html5 i browser moderni permettono di caricare pi\u00f9 file contemporaneamente attraverso un unico campo di input.<\/p>\n

Visualizzare i dati dei file<\/h3>\n

Il primo step da realizzare con javascript per offrire un miglior controllo del flusso di caricamento all’utente \u00e8 elencare le informazioni tecniche dei file selezionati prima del caricamento:<\/p>\n

\"\"<\/a>
Visualizzare i file selezionati con Javascript<\/figcaption><\/figure>\n

Per predisporre la visualizzazione delle informazioni tecniche tramite Js ci viene in aiuto la specifica FileAPI di HTML5<\/a>. Avendo il riferimento all’input per la selezione dei file possiamo accedere all’oggetto FileList<\/strong> contenente la lista dei file selezionati: una collezione di oggetti di tipo File<\/strong>. Le propriet\u00e0 dell’oggetto File<\/a> sono:<\/p>\n

    \n
  1. name<\/strong>: il nome del file<\/li>\n
  2. type<\/strong>: il mime type del file<\/li>\n
  3. size<\/strong>: la dimensione del file in bytes<\/li>\n<\/ol>\n

    Il codice javascript corrispondente:<\/p>\n

    [javascript]
    \nfselected: function() {
    \n\tvar fileinfo = ”;
    \n\tvar files = this.element.files;
    \n\tfor (xx=0;xx<files.length;xx++) {
    \n\t\tvar file=files[xx];
    \n \t\tvar fileSize = 0;
    \n \t\tif (file.size > 1024 * 1024)
    \n\t\t\tfileSize = (Math.round(file.size * 100 \/ (1024 * 1024)) \/ 100).toString() + ‘MB’;
    \n\t\telse
    \n\t\t\tfileSize = (Math.round(file.size * 100 \/ 1024) \/ 100).toString() + ‘KB’;
    \n\t\tfileinfo += " " + ‘Name: ‘ + file.name + ‘<br \/>Size: ‘ + fileSize + ‘<br \/>Type: ‘ + file.type + "";
    \n\t}
    \n\tif (this.fileinfo==undefined)
    \n\t\tthis.fileinfo = new Element(‘div’,{
    \n\t\t\t‘class’:’fileinfo’
    \n\t\t}).inject(this.element, ‘after’);
    \n\tthis.fileinfo.set(‘html’,fileinfo);
    \n}
    \n[\/javascript]<\/p>\n

    fselected<\/em> \u00e8 il metodo della classe Js che abbiamo creato per la gestione del form. Per comodit\u00e0 ho utilizzato alcune istruzioni della libreria Mootools che recentemente \u00e8 arrivata alla versione 1.3.2. Questo metodo viene richiamato all’evento onchange<\/em> dell’input[type=”file”]<\/em> inserito nel nostro form. L’elemento in questione \u00e8 identificato, nella nostra classe come this.element<\/em>. L’istruzione this.element.files<\/em> restituisce tutti i file che sono stati selezionati per la suddetta input e ciclando questi dati otteniamo ogni singolo elemento, dal quale recuperare le propriet\u00e0 name<\/strong>, size<\/strong> e type<\/strong>.<\/p>\n

    L’invio del form<\/h3>\n

    La parte pi\u00f9 interessante della classe Js realizzata \u00e8 quella legata all’invio del form e la gestione della percentuale di progressione nel caricamento dei dati:<\/p>\n

    [javascript]
    \nupload: function(e){
    \n\te.stop();
    \n\tvar data = new FormData();
    \n\tvar files = this.element.files;
    \n\tfor (xx=0;xx<files.length;xx++) {
    \n\t\tdata.append("file["+xx+"]", files[xx]);
    \n\t}
    \n\tvar xhr = new XMLHttpRequest();
    \n\txhr.upload.addEventListener("progress", this.uploadProgress.bind(this), false);
    \n\txhr.addEventListener("load", this.uploadComplete.bind(this), false);
    \n\txhr.addEventListener("error", this.uploadFailed.bind(this), false);
    \n\txhr.addEventListener("abort", this.uploadCanceled.bind(this), false);
    \n\txhr.open("POST", this.url);
    \n\txhr.send(data);
    \n},
    \nuploadProgress: function(evt) {
    \n\tif (evt.lengthComputable) {
    \n\t\tvar percentComplete = Math.round(evt.loaded * 100 \/ evt.total);
    \n\t\tdocument.getElementById(‘progressNumber’).innerHTML = percentComplete.toString() + ‘%’;
    \n\t}
    \n\telse {
    \n\t\tdocument.getElementById(‘progressNumber’).innerHTML = ‘unable to compute’;
    \n\t}
    \n},
    \nuploadComplete: function(evt) {
    \n\talert(evt.target.responseText);
    \n},
    \nuploadFailed: function(evt) {
    \n\talert("Errore durante il caricamento del file.");
    \n},
    \nuploadCanceled: function(evt) {
    \n\talert("Upload cancellato dall’utente oppure connessione interrotta dal browser.");
    \n}
    \n[\/javascript]<\/p>\n

    Il metodo upload viene chiamato al click sul input[type=”submit”] incluso nel form. La classe FormData istanziata \u00e8 supportata da XMLHttpRequest 2 ed \u00e8 un oggetto utile per definire un elenco di dati definiti secondo lo stile coppia key\/value tramite il metodo append(). Il metodo upload e gli altri da esso richiamati tramite listener per i vari eventi legati al caricamento sono semplici e di comprensione intuitiva.
    \nMenzione va fatta per la gestione dell’indicatore di progressione dell’invio applicato all’evento progress<\/em> e che, tramite i valori loaded<\/em> e total<\/em> offerti dall’evento passato al metodo uploadProgress<\/em>. Questi valori ci dicono la quantit\u00e0 di informazioni caricate rispetto a quelle totali da inviare tramite il form: cos\u00ec \u00e8 possibile gestire il valore per tracciare la percentuale del caricamento in vari modi, come barra di caricamento o semplice percentuale stampata.<\/p>\n

    \"\"<\/a>
    Il form in caricamento con la percentuale di caricamento<\/figcaption><\/figure>\n

    Cliccando qui \u00e8 possibile scaricare la classe realizzata che richiede il caricamento di Mootools 1.3.2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    \"\"L’upload di file<\/strong> tramite pagine web come, ad esempio, il caricamento degli allegati ad una email, oppure le immagini da caricare in una gallery, ecc…, \u00e8 spesso tra i pensieri di molti web developers<\/strong>. Durante i primi anni del web, l’upload di file era gestito semplicemente da un form inviato ad un’altra pagina web: il browser ricaricava completamente la pagina impostata nell’action del form. Questo metodo andava, e va ancora, bene per siti semplici o istituzionali nei quali l’invio di form non \u00e8 l’aspetto essenziale a livello quantitativo per le prestazioni del software. Vediamo qualcosa pi\u00f9 sofisticato e moderno, adatto per \u00a0web applications<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[132,106],"class_list":["post-7726","post","type-post","status-publish","format-standard","hentry","category-sviluppo","tag-html","tag-html5"],"yoast_head":"\n\u2022 HTML5 - Upload di file con XMLHttpRequest 2 - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: HTML5 - Upload di file con XMLHttpRequest 2. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 HTML5 - Upload di file con XMLHttpRequest 2 - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: HTML5 - Upload di file con XMLHttpRequest 2. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-07-01T12:47:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:48:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/07\/html5-upload.png\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"HTML5 – Upload di file con XMLHttpRequest 2\",\"datePublished\":\"2011-07-01T12:47:40+00:00\",\"dateModified\":\"2023-02-27T14:48:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/\"},\"wordCount\":1035,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/07\\\/html5-upload.png\",\"keywords\":[\"HTML\",\"html5\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/\",\"name\":\"\u2022 HTML5 - Upload di file con XMLHttpRequest 2 - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/07\\\/html5-upload.png\",\"datePublished\":\"2011-07-01T12:47:40+00:00\",\"dateModified\":\"2023-02-27T14:48:55+00:00\",\"description\":\"Leggi dal blog: HTML5 - Upload di file con XMLHttpRequest 2. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/07\\\/html5-upload.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/07\\\/html5-upload.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 – Upload di file con XMLHttpRequest 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 HTML5 - Upload di file con XMLHttpRequest 2 - Artera","description":"Leggi dal blog: HTML5 - Upload di file con XMLHttpRequest 2. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 HTML5 - Upload di file con XMLHttpRequest 2 - Artera","og_description":"Leggi dal blog: HTML5 - Upload di file con XMLHttpRequest 2. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2011-07-01T12:47:40+00:00","article_modified_time":"2023-02-27T14:48:55+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/07\/html5-upload.png","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"HTML5 – Upload di file con XMLHttpRequest 2","datePublished":"2011-07-01T12:47:40+00:00","dateModified":"2023-02-27T14:48:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/"},"wordCount":1035,"commentCount":0,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/07\/html5-upload.png","keywords":["HTML","html5"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/","name":"\u2022 HTML5 - Upload di file con XMLHttpRequest 2 - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/07\/html5-upload.png","datePublished":"2011-07-01T12:47:40+00:00","dateModified":"2023-02-27T14:48:55+00:00","description":"Leggi dal blog: HTML5 - Upload di file con XMLHttpRequest 2. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/07\/html5-upload.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/07\/html5-upload.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-upload-di-file-piu-pulito-con-xmlhttprequest2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"HTML5 – Upload di file con XMLHttpRequest 2"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/7726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=7726"}],"version-history":[{"count":8,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/7726\/revisions"}],"predecessor-version":[{"id":217804,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/7726\/revisions\/217804"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=7726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=7726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=7726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}