【发布时间】:2016-01-01 21:21:55
【问题描述】:
我想给我的新网站一个功能,我可以通过一个按钮上传一张图片并将图片存储(本地存储)到另一个 .html 页面上,然后如果我抓取它是 绝对 URL我可以在论坛网站上发布它的预览,到目前为止,我有一个功能可以让我上传和预览图像。但我想更上一层楼。
HTML:
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
Javascript:
<script>
function previewFile(){
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
} else {
preview.src = "";
}
}
previewFile(); //calls the function named previewFile()
</script>
总结:上传图片,存储(本地存储),然后抓取它的绝对 URL 将其粘贴到另一个网站以获取该图片的预览。
【问题讨论】:
-
我认为你需要一个后端来存储图像,除非你只存储 url,在这种情况下我会在 html5 存储中查找w3 schools web storage
-
我不确定我应该使用什么,如果我得到 abs URL,那么我很好,但是图像必须存储,如果它在本地我必须测试这是否有效,我仍然需要答案
-
将图像存储在 html 文件中是什么意思?您想将其 base64 表示形式存储在 html 中吗?您需要明确是要将图像存储在后端(将其发送到后端并再次检索)还是存储在前端,只有当前用户才能看到它(网络存储)。网络存储是例如如果您创建一个 JavaScript 图像裁剪页面,用户在哪里打开图像,裁剪它并希望再次将其保存在本地设备上,那就太好了。后端(您的服务器)永远不会看到该图像。
-
@ssc-hrep3 将其存储在本地存储中:D 希望有所帮助
标签: javascript php jquery html css