h5调用手机相册上传文件、返回File文件/上传结果路径

在H5中调用手机相册上传文件并获取返回结果，可以使用input标签的type="file"属性来实现文件选择，然后使用JavaScript的FileReader API来处理选中的文件。上传文件通常需要使用Ajax技术与服务器端进行交互。以下是一个简单的示例：

HTML部分：

<input type="file" id="fileInput" />
<div id="uploadResult">等待上传结果...</div>

JavaScript部分：

document.getElementById('fileInput').addEventListener('change', function(e) {
    var file = e.target.files[0]; // 获取文件引用
    var reader = new FileReader(); // 创建FileReader对象
 
    reader.onload = function(e) {
        // 当文件读取完成后，e.target.result将包含文件的数据URL
        var dataURL = e.target.result;
 
        // 这里可以使用Ajax将数据URL发送到服务器端
        // 示例使用fetch API进行上传
        fetch('your_upload_server_endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                file: dataURL
            })
        })
        .then(response => response.json())
        .then(data => {
            // 更新上传结果
            document.getElementById('uploadResult').innerText = '上传结果: ' + data.path;
        })
        .catch(error => {
            console.error('上传出错:', error);
            document.getElementById('uploadResult').innerText = '上传失败';
        });
    };
 
    reader.onerror = function(error) {
        console.error('文件读取出错:', error);
    };
 
    reader.readAsDataURL(file); // 读取文件
});

服务器端接收上传的数据，处理后返回JSON格式的上传结果，例如：

{
    "path": "uploaded/image.jpg"
}

请注意，服务器端的处理逻辑需要根据实际情况来编写，并且需要处理好文件的接收和存储。以上代码仅提供了客户端和服务器端交互的基本框架。