The input tag processes Multifile uploads and the input Tag file uploads.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui ">
<Meta name = "apple-mobile-web-app-capable" content = "yes">
<Meta name = "apple-mobile-web-app-status-bar-style" content = "black">
<Meta name = "format-detection" content = "telephone = no">
<Title> upload multiple files </title>
</Head>
<Body>
<Div style = "height: 100px; width: 100px; border: 1px solid red; position: relative;">
Click to upload
<Input onchange = "uploadFile ()" id = "upload" multiple = "multiple" type = "file" accept = "image/*; capture = camera" style = "height: 100px; width: 100px; opacity: 0; position: absolute; top: 0; left: 0; "/>
</Div>
<Script>
Function uploadFile (){
Var input = document. getElementById ('upload ');
Var files = Array. prototype. slice. call (input. files );
Files. forEach (function (file, I ){
Var reader = new FileReader ();
Reader. onloadend = function (e ){
Var baseFileStr = this. result. substring (13 + file. type. length), this. result. length );
Console.info ("output file data ");
Console.info (baseFileStr );
}
Reader. readAsDataURL (file );
});
}
</Script>
</Body>
</Html>
>>> Output file data
>>> IVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
