1<! DOCTYPE html>23 45<meta charset="Utf-8">6<TITLE>HTML5 Call phone camera </title>7<style type="Text/css">8 . Addborder {9 border:1px solid #ccc;Ten } One #imgDiv { A width:300px; - height:300px; - } the - #imgContent { -Width -%; -Height -%; + } -</style> + A at<body> - -<buttonclass="btn"style="height:200px;width:200px;background-color:red;"> Buttons </button> -<form id="Imgform"> -<inputclass="Addborder"accept="image/*"Type="file"style="Display:none;"> -<br/> in</form> -<button style="Height:100px;width:100px;background-color:green;"onclick="loadimg ()"> Get Pictures </button> to<div id="Imgdiv"> +"imgcontent"> -</div> the<script src="Https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> *<script type="Text/javascript"> $ Panax Notoginseng function loadimg () { - //Get File the varFile = $ ("#imgForm"). Find ("input")[0].files[0]; + A //to create an object that reads a file the varReader =NewFileReader (); + - //creating file read-related variables $ varImgfile; $ - //setting events successfully for file read -Reader.onload =function (e) { theAlert'file Read Complete'); -Imgfile =E.target.result;Wuyi Console.log (imgfile); the$("#imgContent"). attr ('src', imgfile); - }; Wu - //formally read files About reader.readasdataurl (file); $ } -$('. BTN'). Click (function () { -$('. Addborder'). Click (); - }) A</script> +</body> the -Pick up your phone camera to take pictures and get the pictures you took
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
