Question

我需要在页面上动态生成项目目录。每个项目都包含存储在JSON对象中的描述数据。每个项目都需要有一个与之关联的图像。用户填写描述数据的表格并从他们的计算机中选择图像并上传＆＃34;。 javascript现在正在用一个用户从他们的系统中选择的图像替换页面中的占位符图像。我希望能够将图像的路径或图像本身存储在JSON对象中。可以这样做吗？我已经读过，出于安全原因，您无法存储绝对文件路径。我不能使用服务器或jQuery，因为这是＆＃34;模拟＆＃34;作业的行为。

编辑：我更新了代码以遵循Varinder建议的mozilla开发人员教程，但它不起作用。我错误地实现了这个吗？

我的HTML代码：

<div class="uploadImgContainer">
    <img src="images/upload_wText.png" id="uploadImgCont" alt="Image"/>
</div>

javascript代码：

var petImg; // global variable to store petImg 
function uploadPetImg(imagePath){
    document.getElementById('uploadImgCont').src=imagePath; 
}
window.onload=function(){
document.getElementById('uploadImageBtn').addEventListener('change',function(event){
var imagePath=URL.createObjectURL(event.target.files[0]);
uploadPetImg(imagePath);

/* to store imagePath of image */
var preview = document.querySelector('uploadImageBtn');
var file = document.querySelector('input[type=file]').files[0];
var fReader = new FileReader();
fReader.addEventListener("load", function(){
    preview.src = fReader.result;
}, false);
if(file){
    petImg = fReader.readAsDataURL(file);
}
});
}

当我在Chrome中检查页面时，JSON对象中的字段根本不显示。应该有一个名为petImg的最后一个字段。输出是： {＆＃34; petName＆＃34;：＆＃34;破折号＆＃34;＆＃34;用户名＆＃34;：＆＃34; BRY＆＃34;＆＃34; petType＆＃34;：＆＃34; cat＆＃34;，＆＃34; petBreed＆＃34;：＆＃34;俄罗斯蓝＆＃34;，＆＃34; petAge＆＃34;：＆＃34; 8＆＃34;，＆＃34; petGender＆＃34; ：＆＃34;男性＆＃34;＆＃34; petLocation＆＃34;：＆＃34; SD＆＃34;＆＃34;记录＆＃34;：＆＃34;是＆＃34;}

任何替代方案？提前谢谢。

替代存储图像路径

0 个答案: