1<!-- 2* Copyright (c) 2025 Huawei Device Co., Ltd. 3* Licensed under the Apache License, Version 2.0 (the "License"); 4* you may not use this file except in compliance with the License. 5* You may obtain a copy of the License at 6* 7* http://www.apache.org/licenses/LICENSE-2.0 8* 9* Unless required by applicable law or agreed to in writing, software 10* distributed under the License is distributed on an "AS IS" BASIS, 11* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12* See the License for the specific language governing permissions and 13* limitations under the License. 14--> 15 16<!DOCTYPE html> 17<html> 18 19<head> 20 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 21 <style> 22 body { 23 font-family: Arial, Helvetica, sans-serif, sans-serif; 24 text-align: center; 25 background-color: #f2f2f2; 26 padding: 20px; 27 } 28 #image { 29 display: none; 30 max-width: 100%; 31 height: auto; 32 margin-top: 15px; 33 } 34 #image_preview { 35 display: none; 36 margin-top: 15px; 37 } 38 </style> 39</head> 40 41<body> 42 <script> 43 // 显示ArkTS返回的图片 44 function showPic() { 45 // input标签的onchange事件触发时，返回的的描述事件所有相关信息的对象，此处接收ArkTS中onShowFileSelector接口的返回结果 46 let event = this.event; 47 let tFile = event ? event.target.files : []; 48 // 如果返回的图片列表是空的，则不显示 49 if (tFile === 0) { 50 document.getElementById('image_preview').style.display = 'block'; 51 document.getElementById('image_preview').innerHTML = '未选择图片'; 52 return; 53 } 54 document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0])); 55 document.getElementById('image_preview').style.display = 'block'; 56 document.getElementById('image').style.display = 'block'; 57 } 58 59 function sharePic() { 60 shareObject.share(); 61 } 62 </script> 63 <input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()"/> 64 <button onclick="sharePic()">分享图片</button> 65 <p id="image_preview">图片预览</p> 66 <img id="image"> 67</body> 68 69</html>