我有一个FileReader,可以让用户将文件(图像)上传到我的网站。
这是执行阅读的代码:
$("input[type='file']").change(function(e) {
var buttonClicked = $(this);
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
console.log(reader.result);
}
reader.readAsDataURL(file);
}
});
当我console.log()
结果时,它会吐出超过95000个字符。
此图片的大小与我接收到我网站的图片大小差不多。
我希望将这些图像存储在数据库中,因此我想知道如何使用非常长的图像源来实现这一点。有没有办法缩短这个或以不同的方式获得图像路径?
我更好奇为什么他们这么长时间,但如果有人提示存储这些(每个用户100个,500多个用户),那也很好! / p>
谢谢 -
答案 0 :(得分:0)
您想要将文件上传到某种类型的服务器(提供javascript的后端),然后从那里开始
基本上,您不会将图像存储在数据库中,而是将其存储在某个文件共享/云主机上,而只是存储以后下载/检索图像所需的内容。
答案 1 :(得分:0)
将文件存储为...文件。
您需要使用FileReader的toDataURL()
方法的用例非常少,所以每次使用它时,都应该问问自己为什么需要它。
在你的情况下:
URL.createObjectURL(File_orBlob)
方法实现。FormData
API轻松实现。
inp.onchange = function(){
var file = this.files[0];
if(file.type.indexOf('image/') !== 0){
console.warn('not an image');
}
var img = new Image();
img.src = URL.createObjectURL(file);
// this is not needed in this case but still a good habit
img.onload = function(){
URL.revokeObjectURL(this.src);
};
document.body.appendChild(img);
}
// not active but to give you da codez
function sendToServer(){
var file = inp.files[0];
var form = new FormData();
// here 'image' is the parameter name where you'll retrieve the file from in the request
form.append('image', file);
form.append('otherInfo', 'some other infos');
var xhr = new XMLHttpRequest();
xhr.open('post', 'yourServer/uploadPage')
xhr.onload = function(){
console.log('saved');
};
xhr.send(form);
}
<input type="file" id="inp">
如果您需要PHP代码来检索此请求的文件形式:
if ( isset( $_FILES["image"] ) ){
$dir = 'some/dir/';
$blob = file_get_contents($_FILES["image"]['tmp_name']);
file_put_contents($dir.$_FILES["image"]["name"], $blob);
}