{"id":27473,"date":"2024-03-16T08:32:07","date_gmt":"2024-03-16T08:32:07","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/"},"modified":"2024-03-22T11:07:23","modified_gmt":"2024-03-22T11:07:23","slug":"how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/","title":{"rendered":"How can the fileupload control obtain the content of the uploaded file?"},"content":{"rendered":"<p>In HTML, using the fileupload control to achieve file upload functionality typically requires using JavaScript to access the content of the uploaded file. Here is a common method:<\/p>\n<ol>\n<li>Define the file upload control in HTML.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myfileupload\"<\/span> \/&gt;<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>Retrieve the content of an uploaded file in JavaScript.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">var<\/span> fileUpload = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"myfileupload\"<\/span>);\r\n<span class=\"hljs-keyword\">var<\/span> file = fileUpload.<span class=\"hljs-property\">files<\/span>[<span class=\"hljs-number\">0<\/span>]; <span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u4e0a\u4f20\u7684\u7b2c\u4e00\u4e2a\u6587\u4ef6<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> reader = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">FileReader<\/span>();\r\n\r\nreader.<span class=\"hljs-property\">onload<\/span> = <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">e<\/span>) {\r\n  <span class=\"hljs-keyword\">var<\/span> fileContent = reader.<span class=\"hljs-property\">result<\/span>; <span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u6587\u4ef6\u5185\u5bb9<\/span>\r\n  <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(fileContent);\r\n};\r\n\r\nreader.<span class=\"hljs-title function_\">readAsText<\/span>(file); <span class=\"hljs-comment\">\/\/ \u4ee5\u6587\u672c\u683c\u5f0f\u8bfb\u53d6\u6587\u4ef6\u5185\u5bb9<\/span>\r\n<\/code><\/pre>\n<p>In the above code, we first use the getElementById() method to get the fileupload control, then use the files property to obtain the list of uploaded files, and then use the FileReader object to read the file contents. By setting the onload event handler for the FileReader object, we can retrieve the file contents after the file is loaded. In this example, we use the readAsText() method to read the file content in text format. If other file formats need to be read, other related methods such as readAsDataURL() or readAsArrayBuffer() can be used.<\/p>\n<p>Please note that for security reasons, browsers restrict access to uploaded files. Therefore, in order to access the content of an uploaded file in JavaScript, an event must be triggered after the user selects the file, such as clicking a button or submitting a form, otherwise the file content cannot be directly accessed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In HTML, using the fileupload control to achieve file upload functionality typically requires using JavaScript to access the content of the uploaded file. Here is a common method: Define the file upload control in HTML. &lt;input type=&#8221;file&#8221; id=&#8221;myfileupload&#8221; \/&gt; Retrieve the content of an uploaded file in JavaScript. var fileUpload = document.getElementById(&#8220;myfileupload&#8221;); var file = [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-27473","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How can the fileupload control obtain the content of the uploaded file? - Blog - Silicon Cloud<\/title>\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.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can the fileupload control obtain the content of the uploaded file?\" \/>\n<meta property=\"og:description\" content=\"In HTML, using the fileupload control to achieve file upload functionality typically requires using JavaScript to access the content of the uploaded file. Here is a common method: Define the file upload control in HTML. &lt;input type=&quot;file&quot; id=&quot;myfileupload&quot; \/&gt; Retrieve the content of an uploaded file in JavaScript. var fileUpload = document.getElementById(&quot;myfileupload&quot;); var file = [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T08:32:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T11:07:23+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"How can the fileupload control obtain the content of the uploaded file?\",\"datePublished\":\"2024-03-16T08:32:07+00:00\",\"dateModified\":\"2024-03-22T11:07:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\"},\"wordCount\":203,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\",\"name\":\"How can the fileupload control obtain the content of the uploaded file? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T08:32:07+00:00\",\"dateModified\":\"2024-03-22T11:07:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can the fileupload control obtain the content of the uploaded file?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can the fileupload control obtain the content of the uploaded file? - Blog - Silicon Cloud","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.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/","og_locale":"en_US","og_type":"article","og_title":"How can the fileupload control obtain the content of the uploaded file?","og_description":"In HTML, using the fileupload control to achieve file upload functionality typically requires using JavaScript to access the content of the uploaded file. Here is a common method: Define the file upload control in HTML. &lt;input type=\"file\" id=\"myfileupload\" \/&gt; Retrieve the content of an uploaded file in JavaScript. var fileUpload = document.getElementById(\"myfileupload\"); var file = [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T08:32:07+00:00","article_modified_time":"2024-03-22T11:07:23+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"How can the fileupload control obtain the content of the uploaded file?","datePublished":"2024-03-16T08:32:07+00:00","dateModified":"2024-03-22T11:07:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/"},"wordCount":203,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/","name":"How can the fileupload control obtain the content of the uploaded file? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T08:32:07+00:00","dateModified":"2024-03-22T11:07:23+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-the-fileupload-control-obtain-the-content-of-the-uploaded-file\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can the fileupload control obtain the content of the uploaded file?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=27473"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27473\/revisions"}],"predecessor-version":[{"id":61706,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27473\/revisions\/61706"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=27473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=27473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=27473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}